react antdesign 实现table组件 外全选取消全选表格的选项

可以通过以下步骤实现：

1. 首先，在表格列定义中添加一个选择器列。

const columns = [
  {
    title: '',
    dataIndex: 'selected',
    render: (selected, record) => (
      <Checkbox checked={selected} onChange={() => handleSelect(record)} />
    ),
  },
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
];

2. 在组件中定义一个 `selectedRowKeys` 状态和一个 `handleSelect` 函数来处理选择器列的变化。

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

const handleSelect = (record) => {
  const key = record.key;
  const selected = selectedRowKeys.includes(key);
  if (selected) {
    setSelectedRowKeys(selectedRowKeys.filter((k) => k !== key));
  } else {
    setSelectedRowKeys([...selectedRowKeys, key]);
  }
};

3. 在表格中添加 `rowSelection` 属性，并将 `selectedRowKeys` 和 `handleSelect` 传递给它。

<Table
  columns={columns}
  dataSource={data}
  rowSelection={{
    selectedRowKeys,
    onChange: setSelectedRowKeys,
  }}
/>

4. 添加全选和取消全选按钮，并在点击时更新 `selectedRowKeys` 状态。

const handleSelectAll = (selected) => {
  if (selected) {
    const allKeys = data.map((record) => record.key);
    setSelectedRowKeys(allKeys);
  } else {
    setSelectedRowKeys([]);
  }
};

<Button onClick={() => handleSelectAll(true)}>全选</Button>
<Button onClick={() => handleSelectAll(false)}>取消全选</Button>