ant-design-vue Table pagination分页实现全过程

<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) => {
        
      })
    },

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

// 分页
      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();
        },
      },

    // 查询
    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(() => {});
    },