vue-antd 分页pagination相关重置问题
作者:互联网
1、在data中声明 pagination变量
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) }, 如有帮助请好评关注:谢谢您的支持标签:pagination,vue,pageSize,val,handleTableChange,current,antd,pager 来源: https://www.cnblogs.com/huoshengmiao/p/14770950.html