如何为Ant Design Table添加独立的全选复选框

核心实现思路 #

Antd Table的rowSelection属性是行选择功能的核心，默认表头会自带全选复选框；如果要自定义全选控件（比如放在自定义表头单元格、修改样式），需要手动维护选中状态，结合自定义表头渲染和rowSelection的回调实现双向控制。

步骤1：初始化状态与基础配置 #

先用useState维护选中行的key集合和表格数据源：

import { useState } from 'react';
import { Table, Checkbox } from 'antd';

const CustomSelectTable = () => {
  // 模拟表格数据
  const [dataSource] = useState([
    { key: '1', name: '张三', age: 28 },
    { key: '2', name: '李四', age: 32 },
    { key: '3', name: '王五', age: 24 },
  ]);
  // 维护选中行的key数组
  const [selectedKeys, setSelectedKeys] = useState([]);

  // 判断是否全选：选中数量等于数据总条数且数据不为空
  const isAllSelected = selectedKeys.length === dataSource.length && dataSource.length > 0;

步骤2：实现全选/取消全选逻辑 #

编写处理全选状态变更的函数，根据当前状态更新选中行集合：

const handleSelectAll = (e) => {
    if (e.target.checked) {
      // 全选：收集所有数据的key
      const allKeys = dataSource.map(item => item.key);
      setSelectedKeys(allKeys);
    } else {
      // 取消全选：清空选中数组
      setSelectedKeys([]);
    }
  };

步骤3：配置自定义表头与rowSelection #

在列配置中自定义第一列为全选复选框，同时通过rowSelection关联选中状态：

const columns = [
    {
      title: () => (
        <Checkbox checked={isAllSelected} onChange={handleSelectAll} />
      ),
      key: 'selection',
      render: (_, record) => (
        <Checkbox
          checked={selectedKeys.includes(record.key)}
          onChange={(e) => {
            if (e.target.checked) {
              setSelectedKeys([...selectedKeys, record.key]);
            } else {
              setSelectedKeys(selectedKeys.filter(key => key !== record.key));
            }
          }}
        />
      ),
    },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '年龄', dataIndex: 'age', key: 'age' },
  ];

  const rowSelection = {
    selectedKeys,
    onChange: (newSelectedKeys) => {
      setSelectedKeys(newSelectedKeys);
    },
    // 隐藏默认全选框，避免重复
    hideDefaultSelections: true,
  };

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

export default CustomSelectTable;

关键细节说明 #

• 状态同步：isAllSelected通过选中数量与数据总条数的对比计算得出，避免额外维护独立的全选状态，减少不同步风险。
• 分页场景适配：如果表格带分页，需区分「当前页全选」和「所有页全选」：
  • 仅选当前页：逻辑与上述一致，仅处理当前页数据源。
  • 选所有页：需额外维护selectAllPages状态，结合全量数据的key集合（或后端接口支持）处理选中逻辑。

内容的提问来源于stack exchange，提问作者Mehran Mahmoudkhani