引言

在现代Web应用开发中，数据表格的使用几乎是不可避免的。特别是在处理大量数据时，分页功能成为了提升用户体验的关键。然而，当用户需要跨页选择数据时，传统的表格组件往往力不从心。本文将深入探讨如何在Ant Design的Table组件中实现跨页数据选择的功能，帮助开发者解决这一常见但棘手的问题。

项目背景

在许多企业级应用中，数据表格不仅仅是展示数据的工具，更是用户与数据交互的界面。假设你正在开发一个后台管理系统，用户需要从成千上万的记录中选择特定的数据进行操作。考虑到性能和用户体验，数据通常是分页加载的，这就引出了一个挑战：如何让用户能够跨页选择数据？

需求分析

1. 跨页选择：用户可以选择当前页的数据，然后切换到下一页继续选择，而不会丢失之前的选择。
2. 条件筛选后选择：用户在应用不同的搜索条件后，仍然能够选择数据，并且这些选择在条件变化时保持不变。

实现方法

为了实现上述功能，我们需要巧妙地管理选中的数据状态。以下是实现的关键步骤：

1. 状态管理

首先，我们需要两个状态来分别存储选中的数据键（selectedKeys）和选中的数据信息（selectedKeysInfo）：

const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
const [selectedKeysInfo, setSelectedKeysInfo] = useState<any[]>([]);

2. 选择与取消选择

当用户选择或取消选择某条记录时，我们需要更新这两个状态：

const rowSelection = {
  selectedRowKeys: selectedKeys,
  onSelect: (record: any, selected: boolean) => {
    if (selected) {
      setSelectedKeys(selectedKeys.concat([record[rowKey]]));
      setSelectedKeysInfo(selectedKeysInfo.concat([record]));
    } else {
      setSelectedKeys(selectedKeys.filter((v) => v !== record[rowKey]));
      setSelectedKeysInfo(selectedKeysInfo.filter((v) => v[rowKey] !== record[rowKey]));
    }
  },
  // ... 其他选择逻辑
};

3. 全选与取消全选

对于全选功能，我们需要处理可能的重复选择，并确保数据的唯一性：

onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
  if (selected) {
    const set1 = new Set(selectedKeys);
    const set2 = new Set(selectedKeysInfo);
    changeRows.forEach((v: any) => {
      set1.add(v[rowKey]);
      set2.add(v);
    });
    setSelectedKeys([...set1]);
    setSelectedKeysInfo([...set2]);
  } else {
    // 取消全选逻辑
  }
},

实际应用

在实际应用中，你可能需要处理更多的边界情况，比如数据更新、删除或新增数据时的状态同步。以下是一个完整的Table组件使用示例：

<Table 
  rowSelection={{ 
    type: 'checkbox', 
    ...rowSelection
  }} 
  columns={columns} 
  dataSource={dataSource} 
  pagination={pagination} 
/>

结论

通过上述方法，我们不仅实现了Ant Design Table组件的跨页选择功能，还确保了在数据筛选条件变化时，用户的选择不会丢失。这种方法不仅提高了用户操作的灵活性，也大大提升了数据管理的效率。希望本文能为正在使用Ant Design进行开发的你提供一些有价值的思路和解决方案。