Ant Design Table 组件翻页保留选中项：最简单方法

Ant Design Table 翻页保留选中项：最简单方法

在使用 Ant Design Table 组件时，你是否遇到过翻页后上一页已选中的行无法保留的问题？最简单的方式是使用 Key 来标识每一行数据，并在翻页时将选中的 Key 保存起来，然后在下一页加载数据时，根据保存的 Key 来判断是否选中该行。

具体步骤如下：

在 Table 组件中，添加一个属性 rowKey，并将其值设置为每一行数据的唯一标识，例如行数据中的 id 字段。

<Table rowKey='id' ... />

在 Table 组件外部定义一个 state，用来保存已选中的行的 Key。

const [selectedKeys, setSelectedKeys] = useState([]);

在 Table 组件的 rowSelection 属性中，通过 selectedRowKeys 属性来设置已选中的行。

<Table rowSelection={{
  selectedRowKeys: selectedKeys,
  onChange: (selectedRowKeys) => setSelectedKeys(selectedRowKeys)
}} ... />

在翻页时，将已选中的 Key 保存起来。

const handlePageChange = (pageNumber) => {
  // 保存已选中的 Key
  setSelectedKeys(selectedKeys);
  // 处理翻页逻辑
  // ...
};

在下一页加载数据时，根据保存的 Key 来判断是否选中该行。

const loadData = (pageNumber) => {
  // 加载数据逻辑
  // ...
  // 根据已选中的 Key 来判断是否选中该行
  const newSelectedKeys = selectedKeys.filter(key => {
    return data.some(item => item.id === key);
  });
  setSelectedKeys(newSelectedKeys);
};

通过上述步骤，即可实现在翻页后保留上一页已选中的行。