在react项目中使用antd的ui组件库,使用table组件切换页码时,勾选组件希望selectedRows能获取全面的勾选数据。但是现在出现一个问题能获取当前页的数据,无法获取上一页选中的数据。
解决方法:用二维数据+下标来存储数据 将每一页作为二维数据的下标,将每一页选中的数组存储在这个二维数组中
第一步:选中时存储二维数组数据
const onSelectedRowChange = (—, selectedRows) => {
let _doubleArr = JSON.parse(JSON.stringify(doubleArr))
_doubleArr[pagination.current ? pagination.current - 1 : 0] = selectedRows // 勾选生成二维数组
// 这块扁平化成为一位数组存放拼接好的一维数组
setSelectedRows(mapRows(_doubleArr)) //更新数据
setDoubleArr(_doubleArr)//更新数据
}
勾选时触发事件
const rowSelection = {
selectedRowKeys: selectedRows.map((item: any) => item.key),
onChange: onSelectedRowChange,
}
第二步 二维数组转一维数组
const mapRows = (params: any[]) => {
let res: any = []
for (let i = 0; i < params.length; i++) {
if (Array.isArray(params[i])) {
res = res.concat(mapRows(params[i]))
} else {
res.push(params[i])
}
}
// 去掉undefined的情况
return res.filter(Boolean)
}
结束语
希望大家能够喜欢我的文章,我真的很用心在写,也希望通过文章认识更多志同道合的朋友。
最后伙伴们,如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。