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 }"
        >
1
2
3
4
5
6
7

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) => {
        
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

onChange与onShowSizeChange 比较

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