pagination events

[zhengtianhaoH5]

It seems not support pagination events

[zollero]

Do you mean the events of size-change and current-change ?

Currently, they are captured in the el-search-table-pagination, and can not be caught out of the el-search-table-pagination.

Please show the code of what you need ?

[yangguoe]

my pagination is validate ,but when i select numbers that show every page,that can not have effect, it always show all data,that i asked,can you tell me why?

[zollero]

@yangguoe Please show your code, and the parameters structure of the api.

[yangguoe]

template params:

    :loadding ="false"
    :page-sizes="[5, 10]"
  :url="`https://www.easymock.com/mock/5b6bd2739bb3902456c1d0c7/api/pagination`"
    :columns="columns">

this is function of fetchHandler: fetchHandler(formParams = {}) {//远程数据获取：获取到的数据处理：

    this.loading = true//正在加载
    let { fetch, method, url, $axios, headers,
          listField, pageIndexKey, pageSizeKey,
          totalField, params, showPagination,
          pagination } = this
    params = JSON.parse(JSON.stringify(Object.assign(params, formParams)))//params是搜索参数
       //console.log(formParams)//得到的也是一个对象observer
    if (showPagination) {//如果显示分页：合并参数
      params = Object.assign(params, {
        [pageIndexKey]: pagination.pageIndex,
        [pageSizeKey]: pagination.pageSize
      })
     // console.log(params)//{pageIndex: 1, pageSize: 20}
    }
    let requestObject = null//请求返回值
    if (fetch) {//fetch：封装好的获取数据的函数，会返回一个promise,会获得搜索条件对象作为参数，若提供该属性，则不再调用url属性获取的数据
      requestObject = fetch(params)
    }
    else {//走了
      $axios.interceptors.request.use(
        config => {
          Object.keys(headers).forEach(v => {//Object.keys()返回一个对象的所有属性形成数组；
            console.log(Object.keys(headers))
            config.headers[v] = headers[v]
          })
          console.log(config)//请求配置的相关信息
          return config;
        },
        error => {
          return Promise.reject(error);
        }
      )
      method = method.toLowerCase();
      if (method === 'get') {//走了
        console.log('发送get请求')
        requestObject = $axios[method](url, { params })
       console.log(requestObject)//得到的是一个Promise对象
      } else {
        requestObject = $axios[method](url, params)
      }
    }

    requestObject.then(response => {//请求成功之后：走了
      console.log('后台数据请求成功的回调函数')
      let result = response.data
      //console.log(result)//数组
      // if (response && !(response instanceof Array)) {//请求回来的结果不是数组；
      //   console.log(response)
      //   if (listField && listField.indexOf('.') !== -1) {//找得到点；
      //     listField.split('.').forEach(vv => {//split用于将字符串分割成字符串数组：data.list----[data,list]
      //       console.log(result)
      //       result = result[vv]
      //       console.log(result)
      //       //console.log(vv)//data---list
      //       //console.log(result[vv])//undefined是result.data
      //       //console.log(result)//是数组，里面是请求到的渲染table的数据；是
      //       this.tableData = result
      //       console.log(this.tableData)
      //     })
      //   } else {
      //     result = response[listField]
      //   }
      // }
      // if (!result || !(result instanceof Array)) {//如果没有请求到值，或者请求到的值是数组；
      //   throw new Error(`结果:${listField} 不是数组.`)
      //   // this.loading = false
      //   return false
      // }

      if (this.dataHandler) {//没有走
        console.log('9999')
        //map返回一个新数组，数组中的值为原数组调用函数处理后的值
        this.tableData = result.map(this.dataHandler)
        console.log('---------------------------------')
        console.log(this.tableData )
      } else {//走了else
        this.tableData = result
      }

      let totalValue = result//将请求到的值赋值给totalValue
      if (Object.prototype.toString.call(result) === '[object Array]') {
        console.log('分页总数获取成功')
        totalValue = result.length//数据总条数
      } else if (typeof result === 'object') {
        if (totalField && totalField.indexOf('.') !== -1) {//找得到data.list的点
          totalField.split('.').forEach(vv => {
            totalValue = totalValue[vv]
            console.log(totalValue)
          })
        } else {
          totalValue = result[totalField]
        }
      } else {
        totalValue = 0
      }
      this.total = totalValue
      this.loading = false
    }).catch(error => {
      console.log('分页总数获取失败')
      this.loading = false
    })
    console.log('后台数据处理')
    console.log(arguments[0])
    console.log(arguments)
  },

[yangguoe]

i have intergrated the codes to my project

[zollero]

@yangguoe Did you copied the function of fetchHandler to your project?

[yangguoe]

i copy this packages folder to my project

[yangguoe]

the pagination is right,but,it can not changes the pagesize of table‘s data

[zollero]

@yangguoe You should install el-search-table-pagination with npm or yarn，please do not just copy it.

[yangguoe]

if (response && !(response instanceof Array)) { if (listField && listField.indexOf('.') !== -1) { listField.split('.').forEach(vv => { result = result[vv] }) } else { result = response[listField] } } i see,can you tell me what is the meaning of this codes?thank you very much result = result[vv]

[yangguoe]

i got it ,thank you very much

[yangguoe]

i am very sorry to disturb you ,but there are some problems, 当我使用npm安装了该组件，并且使用了您的remote数据案例，不过不管我分页设置每页显示一条还是两条数据的时候，他都是显示全部的（两条数据），完全按照案例，没有改变，是没有实现这个功能吗？ 为什么本地的这个功能管用呢

[zollero]

@yangguoe 组件只会根据你设定的分页参数对应的向接口中传递分页参数，并不会对接口返回的数据重新做分页。

你需要确认下后端接口是不是支持分页查询？如果支持分页查询的话，要确认分页参数是不是符合接口要求？

[yangguoe]

i have resolve it,that was port has problem,this is a super components,thank you very much ! i will learn from you !