ProTable 进行分页操作后如何保留之前选择的数据？

业务场景：

用户点击第一页数据选择某几条数据，切换至第二页保留上次所选数据。

看官方直接使用onChange事件能实现该效果，但真实场景使用时却发现直接使用onChange方法设置所选数据是无法保留上次记录的，因为table进行分页时会重新调用接口，会重新去更新dataSource的数据，但官方的dataSource数据是静态模拟的全部页数的数据。

详细实现可查看 antd Table：

最终选择 结合使用rowSelection的onSelect和onSelectAll方法进行实现

具体实现代码如下：

import ProTable from '@ant-design/pro-table';
import { useSetState } from 'ahooks';

const Example = () => {
  const [state, setState] = useSetState({
    selectedRowsState: [], // 当前选中数据
  });

  const columns = [
   {
      title: 'iotId',
      dataIndex: 'iotId',
    },
  ]

  return (
      <ProTable
        headerTitle="example"
        rowKey="iotId"
        search={{
          labelWidth: 'auto',
        }}
        rowSelection={{
           selectedRowKeys: state.selectedRowsState.map((v:DeviceListItem) => v.iotId),
           onSelect: (record, selected) => {
              const selectedRowKeysTemp = [...state.selectedRowsState];
              if (!selected) {
                // 若是取消选中表格单条数据，则筛选出这条数据，重新给selectedRowsState赋值
                setState({
                    selectedRowsState: selectedRowKeysTemp.filter((v) => v.iotId !== record.iotId),
                })
              } else {
                // 若是选中表格单条数据，则将这条数据push进去
                selectedRowKeysTemp.push(record);
                setState({
                  selectedRowsState: selectedRowKeysTemp,
                })
              }
            },
            onSelectAll(selected, selectedRows, changeRows) {
              const selectedRowKeysTemp = [...state.selectedRowsState];
              // changeRows为当前点击全选所选中的数据数组
              changeRows.forEach((item) => {
                // 若是取消选中表格多选按钮，则筛选出数组中每条数据
                if (!selected) {
                  const itemIndex = selectedRowKeysTemp.findIndex((v) => v.iotId !== item.iotId);
                  if (itemIndex !== -1) {
                    selectedRowKeysTemp.splice(itemIndex, 1)
                  }
                } else {
                 // 若是选中表格多选按钮，则将数组中每条数据push进去
                  selectedRowKeysTemp.push(item);
                }
              });
              // 将最终数据set给selectedRowsState
              setState({
                selectedRowsState: selectedRowKeysTemp,
              })
            },
         }}
         options={false}
         request={filterDevices}  // 此处是接口请求
         columns={columns}  // 此处可配置列描述数据对象
      />
   )
}
export default Example;

希望本文能对大家有所帮助，如有错误，敬请指出，大家共同进步~