antd table的选择框

Antd Table提供了一个非常方便的选择框功能，可以让用户通过复选框来选择一行或多行数据。具体实现方式如下：

1. 在columns中增加一个列，用来显示选择框。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <a>Delete</a>
      </Space>
    ),
  },
  // 新增的选择框列
  {
    title: 'Select',
    dataIndex: 'select',
    render: (text, record) => <Checkbox onChange={() => handleSelect(record.id)} />,
  },
];

2. 在Table组件中设置rowSelection属性，并定义onSelect方法。

const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);

const rowSelection = {
  selectedRowKeys,
  onChange: (selectedRowKeys, selectedRows) => {
    setSelectedRowKeys(selectedRowKeys);
    setSelectedRows(selectedRows);
  },
};

const handleSelect = (id) => {
  const index = selectedRowKeys.indexOf(id);
  if (index > -1) {
    setSelectedRowKeys(selectedRowKeys.filter((key) => key !== id));
    setSelectedRows(selectedRows.filter((row) => row.id !== id));
  } else {
    setSelectedRowKeys([...selectedRowKeys, id]);
    setSelectedRows([...selectedRows, dataSource.find((item) => item.id === id)]);
  }
};

<Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />;

其中，onSelect方法会在用户选择或取消选择行数据时被触发，并更新选择框的状态。handleSelect方法则用来处理选择框的点击事件，并更新所选中的行数据。最终，我们可以通过selectedRowKeys和selectedRows来获取用户选择的行数据。