antd ProTable获取远程数据 批量选择翻页失效

更新
preserveSelectedRowKeys: true

const rowSelections = {
    selectedRowKeys,
    preserveSelectedRowKeys: true,
    onChange: (selectedRowKeys: any[], selectedRow: any[]) => {
      setSelectedRowKeys(selectedRowKeys);
      // if (props?.onComplete) props?.onComplete(selectedRowKeys);
    },
  };

旧版本

import React, { PureComponent } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button } from 'antd';
import { search, account } from '@/services/account';

interface State {
  selectedRowKeys: any[];
}

export default class extends PureComponent<{}, State> {
  tableAction: React.MutableRefObject<ActionType> = React.createRef<ActionType>() as any;

  constructor(props:any) {
    super(props);
    this.state={
      selectedRowKeys: [],
    }
  }

  onCheckedBoxChange = (selectArr: any) => {
    this.setState({
      selectedRowKeys: [...this.state.selectedRowKeys, ...selectArr],
    });
  };

//表格全选功能时，根据是否全选中来对select进行合并，或者删去全部选中的数据
  onCheckedBoxAll = (id: any, selected: any) => {
    this.setState({
      selectedRowKeys: selected
        ? [...new Set([...this.state.selectedRowKeys, ...id])]
        : this.state.selectedRowKeys.filter((item) => !new Set(id).has(item)),
    });
  };

//行点击时，根据当前行的是否被选中true和false，对selectAll进行新增或删掉当前点击的行id
  onSelectclick = (id: any, selected: any) => {
    this.setState({
      selectedRowKeys: selected
        ? [...new Set([...this.state.selectedRowKeys, id])]
        : this.state.selectedRowKeys.filter((item) => item !== id),
    });
  };
  
  async handleSource(params: any) {
    const response = await search(params);
    return {
      data: response.dataSet,
      total: response.total,
      success: true,
    };
  }

  render() {
    const columns: ProColumns<account>[] = [
      {
        title: '账号',
        dataIndex: 'id',
      },
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '性别',
        dataIndex: 'gender',
        filters: undefined,
        valueEnum: {
          '': '全部',
          1: '男',
          2: '女',
          0: '-',
        },
        hideInSearch: true,
      },
      {
        title: '操作',
        align: 'left',
        valueType: 'option',
        render: (_, row) =>{
          return <>
            <a>操作</a>
          </>
        }
      },
    ];

    
	const { selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onSelect: (record: any, selected: any) => {
        this.onSelectclick(record.id, selected)
      },
      onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
        const allId = changeRows.map((item: any) => {
          return item.id;
        });
        this.onCheckedBoxAll(allId, selected);
      },
    };

    return (
      <PageContainer>
        <ProTable<account>
          rowKey="id"
          actionRef={this.tableAction}
          rowSelection={rowSelection}
          tableAlertRender={false}
          request={(params) => this.handleSource(params)}
          columns={columns}
          scroll={{ x: 'max-content' }}
          pagination={{
            pageSize: 10,
          }}
          tableAlertRender={
            !selectedRowKeys.length ? false : 
            ({ selectedRowKeys, selectedRows, onCleanSelected }) => (
            <Space size={24}>
              <span>
                已选 {selectedRowKeys.length} 项
              </span>
            </Space>
          )}
          toolBarRender={() => [
            <Button>
              新建账户
            </Button>,
            <Button
              key={2}
              type="primary"
            >
              批量新建
            </Button>
          ]}
        />
      </PageContainer>
    );
  }
}