react antd表格翻页时记录勾选状态

每一天，每一步2024-07-07 17:53

在Ant Design的React表格（Table）组件中，如果需要在翻页时记住勾选状态，可以通过以下步骤实现：

使用rowSelection属性来控制勾选状态，并添加preserveSelectedRowKeys: true以保留 key。
设置rowKey属性。

javascript 复制代码

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const MyTable = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const rowSelection = {
    preserveSelectedRowKeys: true, // 分页切换保留上一页勾选的数据：2. 设置 rowSelection.preserveSelectedRowKeys 属性以保留 key。
    selectedRowKeys,
    onChange: (newSelectedRowKeys, newSelectedRows) => {
      console.log('selectedRows changed: ', newSelectedRowKeys, newSelectedRows);
      setSelectedRowKeys(newSelectedRowKeys);
    },
  };

  return (
    <Table
      rowSelection={{
        ...rowSelection,
      }}
      rowKey={record => record.PAGEHELPER_ROW_ID}  // 分页切换保留上一页勾选的数据：1. 加上rowKey这个属性，值为row id
      ......
    />
  );
};

export default MyTable;