react + ant-ProTable 表格跨页选择

protable 选择行设计到的api有

onSelect - 单行选择
onSelectMultiple - 多行选择（使用shift键可以触发多选）
onSelectAll - 全选全不选
onChange - 每次选择行都会触发onChange，并且是后执行。

跨页选择逻辑

cancleRowKeys - 取消选择的行
mySelectedRowKeys - 选中的行

1. 选择行时，判断是选择还是取消选择，如果是取消选择，将行key存储至 cancleRowKeys 中
2. 在onChange 方法中

• 如果cancleRowKeys有值，说明此次选择是取消选择，从已选中的行mySelectedRowKeys过滤掉cancleRowKeys，并将cancleRowKeys重置为空
• 如果cancleRowKeys没有值，将选中数据添加至mySelectedRowKeys，并清理重复数据

代码

import { useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { mockData , mockColumns } from './mock';

const Demo = props =>{
	const [mySelectedRowKeys,handleMySelectedRowKeys] = useState([]);  // 选中的项目
	// 由于cancleRowKeys不影响dom，所以不使用useState定义
	let cancleRowKeys = []; // 取消选择的项目

	const onSelect = (record, selected) => {
		if (!selected) {
			cancleRowKeys = [record.id];
		}
	}
	
	const onMulSelect = (selected, selectedRows, changeRows) => {
		if (!selected) {
			cancleRowKeys = changeRows.map((item) => item.id);
		}
	}
	
	const onChange = (selectedRowKeys, selectedRows) => {
		if (cancleRowKeys.length) {
			const keys = mySelectedRowKeys.filter((item) => !cancleRowKeys.includes(item));
			handleMySelectedRowKeys(keys);
			cancleRowKeys = [];
		} else {
			handleMySelectedRowKeys([...new Set(mySelectedRowKeys.concat(selectedRowKeys))]);
		}
    }

	return (
      <ProTable
        dataSource={ mockData }
        columns={ mockColumns }
        rowKey="id"
        rowSelection={{
          selectedRowKeys: mySelectedRowKeys,
          onSelect,
          onSelectMultiple: onMulSelect,
          onSelectAll: onMulSelect,
          onChange,
        }}
        tableAlertRender={() => {
          return `已选择 ${mySelectedRowKeys.length} 项`;
        }}
        tableAlertOptionRender={() => {
          return false;
        }}
      />
  );
}

通过 tableAlertRender和 tableAlertOptionRender 来对头部alert进行自定义。设置或者返回 false 即可关闭。需要将右侧取消选择按钮关闭。