pagination: {
total: 0,
pageNum: 1,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: [‘10‘, ‘20‘, ‘50‘], //每页中显示的数据
showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
showQuickJumper: true,
onShowSizeChange: (current, pageSize) => that.pageSize = pageSize, // 改变每页数量时更新显示
注：在使用onShowSizeChange方法是需在return{}外声明个that , let that = this改变this指向问题否则无效
},
2、在a-table中引入
<a-table
:columns="columns"
:data-source="data"
:pagination="pagination" // 分页
:rowKey="record=>record.id" // 唯一值辨认 提高diff算法同时防止不必要的报错提示
@change="handleTableChange" //分页事件@change
/>
3、
在handleTableChange事件中如果想重值页码需要添加字段current ，再要想让每页显示多少条动态生效需要添加pageSize 并重新赋值给data中声明的pagination 变量
//分页事件
handleTableChange(val, filters, sorter) {
console.log(val)
const pager = { ...this.pagination };
pager.current = val.current; // 查看文档可知current 是改变页码数必要字段
pager.pageSize = val.pageSize; // 查看文档可知pageSize是改变动态条数必要字段
console.log(pager)
// console.log(filters)
this.pagination = pager;
this.refresh(val.current, val.pageSize) //接口方法根据个人情况具体使用
},
4、重置生效必须调用handleTableChange（）方法
//重置
reset() {
this.queryParam = {}
let val = {
current: 1,
pageSize: 10
}
this.handleTableChange(val)
},
如有帮助请好评关注：谢谢您的支持
