react antsesign table表格新加一个全选框

要在 Ant Design 的 Table 表格中添加全选框，可以按照以下步骤进行：

1. 在 Table 组件的 columns 属性中添加一个新的列，用于显示全选框，例如：

{
  title: '',
  dataIndex: 'checkbox',
  render: (_, record) => <Checkbox onChange={(e) => handleCheckboxChange(e, record)} />
},

其中，handleCheckboxChange 是处理全选框改变事件的函数，record 是当前行的数据。

2. 在 Table 组件的 dataSource 属性中添加一个新的属性，用于保存每一行是否被选中的状态，例如：

{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
  checkbox: false
},

其中，checkbox 属性初始值为 false。

3. 在 handleCheckboxChange 函数中，根据当前行的选中状态更新 dataSource 中对应行的 checkbox 属性，例如：

const handleCheckboxChange = (e, record) => {
  const newData = [...dataSource];
  const index = newData.findIndex((item) => record.key === item.key);
  if (index > -1) {
    newData[index].checkbox = e.target.checked;
    setDataSource(newData);
  }
};

其中，setDataSource 是更新 Table 组件中 dataSource 属性的方法。

4. 在全选框的 onChange 事件中，遍历 dataSource 中的每一行，更新它们的 checkbox 属性，例如：

const handleSelectAllChange = (e) => {
  const checked = e.target.checked;
  const newData = dataSource.map((item) => {
    return {
      ...item,
      checkbox: checked
    };
  });
  setDataSource(newData);
};

其中，setDataSource 是更新 Table 组件中 dataSource 属性的方法。

5. 最后，在 Table 组件的 title 属性中添加全选框，例如：

<Table
  columns={columns}
  dataSource={dataSource}
  title={() => (
    <Checkbox onChange={handleSelectAllChange}>全选</Checkbox>
  )}
/>

这样就完成了在 Ant Design 的 Table 表格中添加全选框的操作。