Ant Design 的表格组件中 rowSelection中的columnTitle支持自定义渲染一个图标，点击这个图标的函数怎么获取 详细代码

好的，以下是详细的代码示例：

import { Table, Button, Tooltip } from 'antd';
import { CheckCircleOutlined } from '@ant-design/icons';

function App() {
  const dataSource = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
    },
  ];

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

  const onSelectChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  const onSelectAll = (selected, selectedRows, changeRows) => {
    setSelectedRowKeys(selectedRows.map((item) => item.key));
  };

  const handleSelectAll = () => {
    const selectedRowKeys = dataSource.map((item) => item.key);
    setSelectedRowKeys(selectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    onSelectAll: onSelectAll,
    columnTitle: () => (
      <Tooltip title="Select All">
        <Button icon={<CheckCircleOutlined />} onClick={handleSelectAll} />
      </Tooltip>
    ),
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
  ];

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

export default App;

在上面的代码中，我们使用 `useState` 定义了一个 `selectedRowKeys` 状态，用于保存选中的行的 `key` 值。在 `onSelectChange` 函数中，我们更新 `selectedRowKeys` 状态，这个函数会在用户手动勾选/取消勾选某一行时触发。在 `onSelectAll` 函数中，我们实现了当用户点击全选图标时选中所有行的逻辑。

在 `rowSelection` 对象中，我们使用 `columnTitle` 属性来自定义渲染全选图标。在渲染函数中，我们使用 `Button` 和 `Tooltip` 组件来渲染一个带有提示信息的按钮，并且在按钮上绑定了 `handleSelectAll` 函数。在 `handleSelectAll` 函数中，我们获取数据源中所有行的 `key` 值，并且将它们保存到 `selectedRowKeys` 状态中，实现了选中所有行的逻辑。

最后，我们将 `dataSource`、`columns` 和 `rowSelection` 传递给了 `Table` 组件，从而渲染出了一个带有自定义全选图标的表格。