Ant Design Vue 之分页 a-pagination使用

分页效果

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

基于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(() => {});
    },