Antd 表格数据分页查询后,分页多选时,勾选数据丢失问题解决

  1. 问题描述:
    表格数据为分页查询获取,在第一页勾选数据后,切换到第二页再勾选数据,会导致第一页中勾选的数据丢失。

  2. 解决方案代码:

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>
posted @   Freakzzz  阅读(1050)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示