位置：首页-资讯-前端开发

ant-design-vueTablepagination分页实现全过程

2023-05-16 20:48

短信预约 -IT技能 免费直播动态提醒

ant-design-vue Table pagination分页实现

ant-design-vue Table自带分页的问题

表格单独使用时，自带简单分页，只包含上一页, 页面码, 下一页,例如：

我们的实现

但如果想要与后端配合着写，则需要传入pagination参数来自定义，

看代码：

分页变动出发handleTableChange事件：

<a-table
          :columns="columns"
          :data-source="wmsWarehouseList"
          :pagination="pagination"
          @change="handleTableChange"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >

data () {
    return {
      // 分页参数
      pagination: {
        // size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'], // 可选的页面显示条数
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        }, // 展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true // 是否可以改变pageSize
      },
  }
}
methods: {
    handleTableChange (e) {
      console.log(e)
      this.pagination = e
      this.loading = true
      const pageNum = e.current - 1
      const pageSize = e.pageSize
      const query = {
        ...this.queryParams,
      }
      const pageReq = { page: pageNum, size: pageSize }
      listWmsWarehouse(query, pageReq).then((response) => {
        
      })
    },

onChange与onShowSizeChange 比较

onChange：页码改变的回调，参数是改变后的页码及每页条数
onShowSizeChange ：只有pageSize 变化才会回调

Ant Design Vue 如何分页（后台传入）

我们在使用分页使，直接用表格()的自定义:pagination属性最方便；如下图所示：

       <a-table
         ref="table"
          style="margin-bottom: 24px"
          row-key="key"
          :columns="goodsColumns"
          :data-source="loadGoodsData"
          :pagination="paginationOpt"
          bordered>
        </a-table>

基于VUE，我们必须在data中定义paginationOpt对象，代码片段如下：

// 分页
      paginationOpt: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "15", "20"],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.defaultCurrent = 1;
          this.paginationOpt.defaultPageSize = pageSize;
          this.searchCameraFrom(); //显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt.defaultCurrent = current;
          this.paginationOpt.defaultPageSize = size;
          this.searchCameraFrom();
        },
      },

调用接口时，❤一定要更新total值！！！！！❤并在发送请求前结构当前页和pagesize的值，否则一直时默认值1和5（我这边初始时1和5，可自己更改）

    // 查询
    searchCameraFrom() {
      console.log(this.cameraParams);
      const { defaultCurrent, defaultPageSize } = this.paginationOpt;
 
      this.$api.Camera.getCameraList({
        currPage: defaultCurrent,
        pageSize: defaultPageSize,
        info: this.cameraParams,
      })
        .then((res) => {
          if (res.code != "200") {
            return Promise.reject;
          }
          console.log(res);
          this.cameraList = res.data;
          this.paginationOpt.total = res.total;
        })
        .catch(() => {});
    },