聊聊antdesign表格在分页情况下，如何在react中实现跨页后选中的数据还在

本文链接：https://blog.youkuaiyun.com/weixin_57760759/article/details/139232495

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、子组件
二、父组件
总结

前言

今天在写项目时，遇到一个前端分页展示的表格，需要在跨页时保留之前选中的数据，但由于我们是动态向后端请求的数据，所以需要前端来保留这个数据。

一、子组件

我们可以在表格单选或者全选的时候给该行数据添加一个标识来判断当前行是否选中或该页数据是否被全选。

代码如下（示例）：

//表格的配置项

selectTableKey（a,b,c）//该方法为传回父组件的方法（第一个参数是选中的key-数组，第二个参数是选中的数据-数组，第三个参数是用于父组件判断是单选还是多选）

//selectedRows为父组件传回的shang上一次选中的全部数据

const rowSelection = {

selectedRowKeys, // 选中的行key

onChange: onSelectChange, // 选中行变化时的回调

onSelect: (record: list, selected: boolean) => {

// 选中行

const arr: list[] = [{

...record,

isSelect: selected

}]

selectTableKey(arr, 0)

},

onSelectAll: (selected: boolean, rows: list[], changeRows: list[]) => {

if (selected) {

// 全选

rows = rows.map((el: list) => ({

...el,

isSelect: selected

}))

} else {

// 取消全选

rows = selectedRow.map((el: list) => ({

...el,

isSelect: changeRows.some((item: list) => item.key === el.key)

}))

}

selectTableKey(rows, 1)

}

}

//监听到父组件传回的数据，更新表格数据及选中状态

useEffect(() => {

setSelectedRows(selectTableData)

setSelectedRowKeys(selectTableData.map(el=>el.key))

}, [selectTableData])

二、父组件

代码如下（示例）：

// 获取右边表格选中数据

const [selectedTableKeys, setSelectedTableKeys] = useState([]);

const [selectTableData, setSelectTableData] = useState([]);

//没有选中，找到该项删除，反之添加

const selectTableKey = useCallback((selectKeys, selectArr, type) => {

let newArr = selectTableData

// type-0单选 type-1多选

if (!type) {

if (!selectArr[0].isSelect) {

const findIndex = newArr.findIndex(el => selectArr[0].key === el.key)

newArr.splice(findIndex, 1)

} else newArr.push(selectArr[0])

} else {

selectArr.forEach(item => {

const findIndex = newArr.findIndex(el => item.key === el.key)

if (findIndex === -1 && item.isSelect && item.key)newArr.push(item)

else if (findIndex !== -1 && !item.isSelect)newArr.splice(findIndex, 1)

})

}

setSelectedTableKeys(newArr.map(el => el.key));

setSelectTableData(newArr);

}, [selectedTableKeys]);