Antd 表格数据分页查询后,分页多选时,勾选数据丢失问题解决
-
问题描述:
表格数据为分页查询获取,在第一页勾选数据后,切换到第二页再勾选数据,会导致第一页中勾选的数据丢失。 -
解决方案代码:
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
const rowSelection = {
selectedRowKeys: selectedRowKeys,
preserveSelectedRowKeys: true, // 关键代码
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
selectedRowKeys &&
StateManage.set(TableControlKey, {
selectedRows: selectedRows
});
}
};
<ConfigProvider locale={zh_CN}>
<Table
rowKey={record => record.id} // 关键代码
bordered
scroll={{ x: 1500, y: 440 }}
rowSelection={{
type: "checkbox",
...rowSelection
}}
columns={columns}
dataSource={dataSource}
pagination={{
showSizeChanger: true,
showQuickJumper: true,
current: page,
onChange: page => pageChange(page),
onShowSizeChange: (current, size) => pageSizeChange(current, size),
showTotal: () => `共 ${total} 条`,
total: total
}}
/>
</ConfigProvider>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异