Vue Ant Design Table 分页后保留选中行数据

<template>
  <a-table
    ref="table"
    size="middle"
    bordered
    rowKey="id"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="ipagination"
    :loading="loading"
    :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    class="j-table-force-nowrap"
    @change="handleTableChange">
  </a-table>
</template>
<script>
export default {
  data() {
    return {
      selectedRowKeys: [],
      selectedRows: [], // 新增属性，保存选中的行数据
      columns: [
        // 列定义...
      ],
      dataSource: [],
      ipagination: {
        // 分页配置...
      },
      loading: false
    }
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows; // 更新选中的行数据
    },
    handleTableChange(pagination, filters, sorter) {
      const prevDataSource = this.dataSource;
      
      // 根据分页配置获取新的数据源dataSource
      // ...
      
      if (this.dataSource !== prevDataSource) {
        const prevSelectedRowKeys = this.selectedRows.map(row => row.id);
        const newSelectedRows = this.dataSource.filter(row => prevSelectedRowKeys.includes(row.id));
        this.selectedRowKeys = newSelectedRows.map(row => row.id);
        this.selectedRows = newSelectedRows;
      }
    }
  }
}
</script>