Antd+React.js实现点击表头展开表格行的方案咨询

核心思路 #

借助Antd Table的expandable属性，结合自定义表头点击事件，手动控制全部行的展开状态，替代之前效果不佳的Collapse+Panel组合。

具体实现步骤 #

• 维护展开状态：用状态变量expandedRowKeys存储所有展开行的key，初始为空数组。
• 自定义表头交互：给目标表头列添加点击事件，点击时切换全局展开状态——若当前全部展开则清空expandedRowKeys，若未全部展开则将所有行key存入数组。
• 绑定expandable配置：把expandedRowKeys和状态更新方法绑定到Table的expandable属性中，还可按需隐藏行内默认展开图标，只保留表头触发入口。

代码示例 #

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

// 模拟表格数据
const dataSource = [
  { key: '1', name: '张三', age: 28, address: '北京市朝阳区' },
  { key: '2', name: '李四', age: 32, address: '上海市浦东新区' },
  { key: '3', name: '王五', age: 25, address: '广州市天河区' },
];

const columns = [
  {
    title: (
      <span style={{ cursor: 'pointer' }} onClick={(e) => handleHeaderExpand(e)}>
        姓名 {expandedRowKeys.length === allRowKeys.length ? '▲' : '▼'}
      </span>
    ),
    dataIndex: 'name',
    key: 'name',
  },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' },
];

const ExpandTable = () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
  const allRowKeys = dataSource.map(item => item.key);

  // 表头点击切换全部展开/收起
  const handleHeaderExpand = () => {
    setExpandedRowKeys(prev => 
      prev.length === allRowKeys.length ? [] : [...allRowKeys]
    );
  };

  // 展开行的内容渲染
  const expandedRowRender = (record) => (
    <p style={{ margin: 0 }}>
      详细信息：{record.name}，{record.age}岁，居住在{record.address}
    </p>
  );

  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      expandable={{
        expandedRowKeys,
        onExpandedRowsChange: setExpandedRowKeys,
        expandedRowRender,
        // 隐藏行内默认展开图标，仅通过表头触发
        expandIcon: () => null,
      }}
    />
  );
};

export default ExpandTable;

额外优化建议 #

• 可以给表头的点击区域添加hover样式，提升交互提示性：

  .header-expand-btn:hover {
    color: #1890ff;
  }
  

• 如果需要多列表头支持展开，只需给对应列的title节点添加相同的点击事件即可。

内容的提问来源于stack exchange，提问作者Aya Abdessalem