Vue antd分页器pagination的使用方法

<a-table
          bordered
          :scroll="{ x: 500 }"
          :rowKey="(record) => record.id"
          :columns="columns"
          :dataSource="data"
          :total="total"
          :pagination="paginationOpt"
        >

在data中进行分页器的初始化： 

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

在获取分页列表的接口中，将total的值带出来更新就好了： 

getDataList () {
      const params = { filters: this.queryParam }
      const { defaultCurrent, defaultPageSize } = this.paginationOpt
      getPublicHandleTemplateList({ ...params, current: defaultCurrent, pageSize: defaultPageSize }).then(res => {  // { ...params }
        this.data = res.data.records
        this.paginationOpt.total = res.data.total
      })
    },