antd 的selectRowkeys 换变量名不生效了

如果在 Ant Design 的 ProTable 中尝试更改 selectedRowKeys 的属性名(例如换成其他名字),可能会导致无法正确地管理表格行的选中状态。在 ProTable 中,selectedRowKeys 是一个特定的属性名,用于表示当前选中的行的 keys 列表。

如果你需要将 selectedRowKeys 更改为其他属性名,可以通过自定义状态来实现类似的功能。你可以使用另一个变量来存储选中行的 keys 列表,并在需要时更新该变量。

以下是一个示例代码,演示了如何自定义状态来管理表格行的选中状态:

import React, { useState } from 'react';
import { ProTable } from '@ant-design/pro-table';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
  },
];

const MyTable = () => {
  const [customSelectedRowKeys, setCustomSelectedRowKeys] = useState([]);

  const handleRowSelectionChange = (selectedRowKeys) => {
    setCustomSelectedRowKeys(selectedRowKeys);
  };

  return (
    <ProTable
      columns={columns}
      dataSource={data}
      rowKey="key"
      rowSelection={{
        selectedRowKeys: customSelectedRowKeys,
        onChange: handleRowSelectionChange,
      }}
    />
  );
};

export default MyTable;

  

在这个示例中,我们使用 customSelectedRowKeys 来代替 selectedRowKeys,并在 handleRowSelectionChange 函数中更新这个自定义状态。通过这种方法,你可以自定义管理表格行的选中状态,而不受 selectedRowKeys 属性名的限制。

希望这个示例能帮助到你!如果你有任何其他问题或需要进一步帮助,请随时告诉我。

转自:ChartGPT

posted @ 2024-03-18 09:48  信铁寒胜  阅读(36)  评论(0编辑  收藏  举报