Ant Design Vue 之分页 a-pagination使用_奔波的鲍滚滚的博客-CSDN博客

[xiaodongxier]

分页效果

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

基于VUE，我们必须在data中定义paginationOpt对象，代码片段如下：

        defaultCurrent: 1, // 默认当前页数        defaultPageSize: 5, // 默认当前页显示数据的大小        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;

调用接口时，一定要更新total值！！！！！并在发送请求前结构当前页和pagesize的值，否则一直时默认值1和5（我这边初始时1和5，可自己更改）

      console.log(this.cameraParams);const { defaultCurrent, defaultPageSize } = this.paginationOpt;this.$api.Camera.getCameraList({        currPage: defaultCurrent,        pageSize: defaultPageSize,this.cameraList = res.data;this.paginationOpt.total = res.total;