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