ant design pro中proTable使用rowSelection

在 Ant Design Pro 中，ProTable 组件提供了 rowSelection 属性，可以用来实现表格行的选择功能。

要使用 rowSelection，需要在 ProTable 组件中设置 rowSelection 属性，并传入一个对象，其中包含了一些配置项，例如：

- type：选择类型，单选或多选
- onChange：选中/取消选中行时的回调函数
- selectedRowKeys：已选中的行的 key 值

下面是一个示例代码，展示如何在 ProTable 中使用 rowSelection：

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

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

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

  const rowSelection = {
    type: 'checkbox',
    onChange: (selectedKeys, selectedRows) => {
      setSelectedRowKeys(selectedKeys);
    },
    selectedRowKeys,
  };

  return (
    <ProTable
      rowSelection={rowSelection}
      dataSource={dataSource}
      columns={[
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
      ]}
    />
  );
};

在这个示例中，我们定义了一个 state 变量 selectedRowKeys 来存储已选中的行的 key 值。然后，我们在 rowSelection 对象中设置了 type 为 'checkbox'，表示可以多选，设置了 onChange 回调函数，每次选择/取消选择行时，都会触发该函数，我们在该函数中更新 selectedRowKeys 的值。最后，将 rowSelection 属性传递给 ProTable 组件即可。

需要注意的是，如果要实现全选功能，需要在 rowSelection 对象中设置一个 onSelectAll 回调函数，来处理全选时的逻辑。