使用antd table组件，分页获取数据，实现跨页多选

一般直接批量不分页去获取数据的时候，跨页多选是很容易实现的。

当分页去获取的时候，rowSelection的onChange属性对应的函数的参数，就只是当前页面的被选中的数据组成的数组，不包含其它页面。因此如果根据这个函数的返回值来确定selectedRowKeys，那么就会丢失之前选中的数据。

因此核心思想就是，如何将之前页面的被选中的数据也存储到selectedRowKeys。

方法1：通过将之前的和现在的selectedRowKeys进行解构赋值，合并到一个数组里、去重、再根据下面2个api的回调函数里的参数的 selected的值 判断 选中 还是 去除勾选，来删除某个元素、还是添加。

详见：参考

方法2：直接改变selectedRowKeys的存储格式。通过{页码：该页码对应的数组} 方式存储，这样就不用考虑这么多问题了。需要增加一个 currentPage 数据，来控制当前页展示的selectedRowKeys

const [selectedRowKeys, setSelectedRowKeys] = useState({ 1: [] }); //主表里被选中的数据的 index
const [currentPage, setCurrentPage] = useState(1);// 主表 里当前的页码

// 主表  多选的隐藏和显示
	let rowSelection = {
		type: "checkbox",
		onChange: onSelectChange,
		selectedRowKeys: selectedRowKeys[currentPage], //选中的行
		hideSelectAll: !showRowSelection, // 是否隐藏全选按钮
		// 展示 or  隐蔽 每条数据前的   多选框
		renderCell: (checked, record, index, originNode) => {
			if (showRowSelection) {
				return originNode;
			}
			return null;
		},
	};
	// 主表 点击勾选框时，要把当前页选中的同步给 selectedRowKeys，不然没法改变selectedRowKeys，就没法勾上了
	function onSelectChange(sRowKeys, selectedRows) {
		//这个是当前被选中的 所有 数据的  "index".
		let temp = { ...selectedRowKeys };  //这里 不能直接解构赋值，因为我给selectedRowKeys 对象 的key值是number，
		temp[currentPage] = sRowKeys;//因此要使用这种方式来 添加 or 更新 当前页码对应的被选中数组
		setSelectedRowKeys(temp);
	}

	// 当前页码发生改变的时候
	function changepage(page) {
		// 重新去获取数据,更新当前页码
		getMainTable({ page, pageSize, type: 0 }, (res) => {
				setMainTableDataSource(res.tabledata);
				setMainTableTotal(res.total);
			});
		setCurrentPage(page);
	}