Ant Design Table 翻页保留选中行数据解决方案

本文介绍如何解决 Ant Design Table 组件在翻页后保留上一页已选中行数据的常见问题。通过使用'selectedRowKeys'属性和事件监听，可以轻松实现跨页选中行状态的保持。

为了解决 Ant Design Table 组件'selectedRows'翻页后保留上一页已选中行数据的问题，可以按照以下步骤进行操作：

在 data 中定义一个'selectedRowKeys'数组，用于存储已选中行的 key 值。
在 mounted 生命周期钩子函数中，获取上一页已选中行的 key 值，并将其存储到'selectedRowKeys'数组中。
在'handleTableChange'方法中，监听翻页事件，并更新'selectedRowKeys'数组中的值。
在'rowSelection'属性中，将'selectedRowKeys'数组传递给'selectedRowKeys'属性，以保持选中行的状态。
在'onSelectChange'方法中，更新'selectedRowKeys'数组的值。

具体代码如下：

<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: [], // 存储已选中行的key值
        // 其他数据...
      };
    },
    mounted() {
      // 获取上一页已选中行的key值，并存储到selectedRowKeys数组中
      const selectedRowKeys = this.$refs.table.selectedRowKeys;
      this.selectedRowKeys = selectedRowKeys ? selectedRowKeys.slice() : [];
    },
    methods: {
      handleTableChange(pagination, filters, sorter) {
        // 更新selectedRowKeys数组中的值
        const selectedRowKeys = this.$refs.table.selectedRowKeys;
        this.selectedRowKeys = selectedRowKeys ? selectedRowKeys.slice() : [];
        
        // 其他操作...
      },
      onSelectChange(selectedRowKeys) {
        // 更新selectedRowKeys数组的值
        this.selectedRowKeys = selectedRowKeys;
        
        // 其他操作...
      },
      // 其他方法...
    },
  };
</script>

通过以上步骤，就可以实现 Ant Design Table 组件'selectedRows'翻页后保留上一页已选中行数据的功能。