antd-vue Table 数据改变时,分页重置到第一页
场景:在使用antd Table的时候,页面中有一个表格,下面是自带的分页,当点击一个按钮的时候,表格的数据更新,但是分页的按钮并不会回到第一页,还停留在之前的位置。以下为关键代码:// 关键:@change="handleTableChange"<a-table :columns="columns" :dataSource="tableLists" :pagination="paginat
·
场景:在使用antd Table的时候,页面有一个Tabs,Tab 1 Tab 2内容是2个Table表格,表格自带分页,当点击Tab按钮的时候,表格的数据更新,但是分页的按钮并不会回到第一页,还停留在之前的位置:
以下为关键代码:
// 关键:@change="handleTableChange"
<a-table :columns="columns" :dataSource="tableLists"
:pagination="pagination" :scroll="{ y: 380 }"
@change="handleTableChange"></a-table>
//分页
pagination: {
current: 1,
defaultPageSize: 5, // 默认5条
total: 0,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ["5", "10", "20", "100"], // 每页数量选项
showTotal: (total) => `共${total}条`,
showSizeChange: (current, pageSize) => {
this.pageSize = pageSize;
},
};
//......
handleTableChange(pagination) {
this.pagination.current = pagination.current;
this.pagination.pageSize = pagination.pageSize;
// console.log(pagination);
}
点击切换表格数据,使表格分页保持在第一页:
change(){
......
//点击切换表格数据源,重置为第一页
this.pagination.current = 1;
}
切换前 数据源1,在第二页:
切换后 数据源2,重置到第一页
更多推荐
所有评论(0)
您需要登录才能发言
加载更多