Vue 翻页保留表格选中数据：方法和步骤详解

要实现在翻页之后保留选中数据，可以通过以下几个步骤来实现：

在 Vue 组件中定义 data 属性，用于保存选中的行数据：

data() {
  return {
    selectedRows: [], // 保存选中的行数据
    selectedRowKeys: [] // 保存选中的行 keys
  }
}

在 Table 组件中的 onSelectChange 方法中更新 selectedRows 和 selectedRowKeys 的值：

onSelectChange(selectedRowKeys, selectedRows) {
  this.selectedRows = selectedRows; // 更新选中的行数据
  this.selectedRowKeys = selectedRowKeys; // 更新选中的行 keys
},

在 Table 组件中的 rowSelection 属性中设置 selectedRowKeys 和 getCheckboxProps 方法：

rowSelection: {
  selectedRowKeys: this.selectedRowKeys,
  getCheckboxProps: record => ({
    checked: this.selectedRowKeys.includes(record.key) // 设置选中状态
  })
},

在 Table 组件中的 pagination 属性中设置 onChange 方法，在翻页时保存选中的行数据：

pagination: {
  onChange: (page, pageSize) => {
    // 获取当前页的选中行 keys
    const selectedRowKeys = this.selectedRowKeys.filter(key => {
      const row = this.dataSource.find(row => row.key === key);
      return row && row.page === page;
    });
    // 获取当前页的选中行数据
    const selectedRows = this.dataSource.filter(row => selectedRowKeys.includes(row.key));
    this.selectedRows = selectedRows;
    this.selectedRowKeys = selectedRowKeys;
  }
},

这样就可以在翻页之后保留翻页前的选中数据，并且考虑取消选中和其他情况。