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 @ 2022-06-14 09:38  Freakzzz  阅读(993)  评论(0编辑  收藏  举报