Ant design 勾选table组件，勾选列添加点击事件

Ant Design 的 Table 组件默认并不直接支持点击列头勾选整行数据，但它可以结合其他组件如 Checkbox 和 RowSelection 一起使用，以实现类似的功能。RowSelection 提供了选择和操作行数据的能力。

首先，在配置 Table 时，需要引入 `antd` 中的 `Table` 和 `RowSelection` 组件：

import { Table, Column, Select, Button } from 'antd';
import { CheckAllOutlined } from '@ant-design/icons';

然后，设置 Table 的 `rowSelection` 属性，例如：

const { SelectionOperator } = Table;

function CustomTable() {
  const [selectedRows, setSelectedRows] = React.useState([]);

  // 勾选所有行的操作
  const handleSelectAll = (selected, selectedRows) => {
    setSelectedRows(selected ? [...selectedRows, ...selected] : []);
  };

  return (
    <div>
      {/* ...其他的表头和列... */}
      <Table
        rowKey="id"
        selection={{ type: SelectionOperator.MULTI, onChange: setSelectedRows }}
        // 其他属性...
      >
        {/* ...表格行... */}
      </Table>

      {/* 添加一个按钮，用于触发全选操作 */}
      <Button onClick={() => handleSelectAll(!selectedRows)}>
        {selectedRows.length > 0 ? '取消全部' : '全选'}
        <CheckAllOutlined />
      </Button>
    </div>
  );
}

在这个例子中，当用户点击“全选”按钮时，会触发 `handleSelectAll` 函数，改变 `selectedRows` 的状态，进而更新表格的选中状态。如果你想为单个列头添加点击事件，可以在列定义中使用自定义渲染：

<Column title="操作" dataIndex="operation" render={(text, record) => (
  <Checkbox
    checked={selectedRows.includes(record.key)}
    onChange={() => handleSelectSingle(record.key)}
  />}
  />

这里 `handleSelectSingle` 是单行操作的处理函数。