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

当分页去获取的时候,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);
	}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐