场景:在使用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,重置到第一页

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐