Ant Design Vue 在list中自定义分页

Ant Design Vue中table拥有定义的@change事件，所以分页时定义pagination绑定自定义分页参数，调用handleTableChage方法就可以进行分页。

      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
        @change="handleTableChange"
        ref="table"
        rowKey="id"
        size="middle"
      >     

     /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },

但是在list中Ant Design Vue官方API并未定义@chang事件，所以博主想了个方法自定义分页事件，pagination中的属性绑定Table中的属性，实现table，list完美切换。不多bb看代码。

       <a-pagination v-model="ipagination.current"
                      v-bind:pageSize="ipagination.pageSize"
                      v-bind:showTotal="(total, range) => `${range[0]}-${range[1]} 共             
                      ${total} 条`"
                      v-bind:total="ipagination.total"
                      v-bind:pageSizeOptions="ipagination.pageSizeOptions"
                      v-bind:showQuickJumper="true"
                      v-bind:showSizeChanger="true"
                      @change="handleListChange"
                      @showSizeChange="handleListChange"
                      size="small"
        ></a-pagination>


handleListChange(current, pageSize) {
      this.ipagination.current = current;
      console.log(pageSize)
      if (pageSize != null && pageSize != "") {
        this.ipagination.pageSize = pageSize;
      }
      this.loadData(null, this.breadFile[this.breadFile.length - 1].id, this.breadFile[this.breadFile.length - 1].name, this.sortList);
    }

且记pagination中方法不能传参，传递参数js中的参数不会自动更行，会绑定上次访问分页时current页的数据。如果想要传参的话参考https://blog.csdn.net/Corey_mengxiaodong/article/details/79977287