react，Table 表格树形如何展开所有子集，以及自定义展开按钮样式

控制展开按钮位置

expandIconColumnIndex属性控制展开图标所在列的索引位置，默认值为0（第一列）。设置为-1时会在数据列左侧创建独立的展开列，避免影响数据列布局。

jsx 复制代码

<Table
  expandable={{
    expandIconColumnIndex: 2,  // 图标显示在第三列
    indentSize: 30,           // 子节点缩进距离
  }}
/>

高级自定义展开按钮

expandIcon支持返回React节点实现完全自定义，可通过expanded参数判断当前状态。此示例实现带文字提示的图标：

jsx 复制代码

expandable={{
  expandIcon: ({ expanded, onExpand, record }) => (
    <Tooltip title={expanded ? "收起" : "展开"}>
      <Button 
        type="text"
        icon={expanded ? <DownOutlined /> : <RightOutlined />}
        onClick={e => {
          e.stopPropagation();
          onExpand(record, e);
        }}
      />
    </Tooltip>
  )
}}

动态展开控制逻辑

实现展开/折叠所有功能需结合外部状态管理。以下示例添加全选控制：

jsx 复制代码

const [expandAll, setExpandAll] = useState(true);
const [expandedKeys, setExpandedKeys] = useState([]);

const toggleExpandAll = () => {
  setExpandAll(!expandAll);
  setExpandedKeys(expandAll ? [] : getAllKeys(data));
};

<Button onClick={toggleExpandAll}>
  {expandAll ? '折叠全部' : '展开全部'}
</Button>

展开行为精细化控制

通过onExpand事件实现展开时的附加操作，如自动选中当前行：

jsx 复制代码

expandable={{
  onExpand: (expanded, record) => {
    if (expanded) {
      setSelectedKeys([record.key]);
    }
  },
  rowExpandable: record => record.type !== 'disabled' // 特定行禁用展开
}}

性能优化方案

大数据量时建议使用懒加载展开内容，避免初始化渲染所有子节点：

jsx 复制代码

expandable={{
  childrenColumnName: 'loadedChildren',
  onExpand: async (expanded, record) => {
    if (expanded && !record.loadedChildren) {
      const children = await fetchChildren(record.id);
      updateData(record.key, { loadedChildren: children });
    }
  }
}}

样式覆盖技巧

通过CSS变量深度定制展开行样式，以下示例修改行高亮颜色：

css 复制代码

.ant-table-expanded-row {
  --row-highlight: #f0f7ff;
  background: var(--row-highlight) !important;
}

.ant-table-row-expand-icon {
  border-color: var(--primary-color);
}

嵌套表格特殊处理

当存在多级嵌套表格时，建议为不同层级设置差异化缩进：

jsx 复制代码

const indentSize = (record) => {
  return 24 * (record.level || 1); 
};

expandable={{
  indentSize,
  expandIcon: ({ expanded }) => (
    <Icon type={expanded ? 'minus' : 'plus'} />
  )
}}

无障碍支持

为屏幕阅读器添加ARIA属性提升可访问性：

jsx 复制代码

expandable={{
  expandIcon: ({ expanded, onExpand, record }) => (
    <button
      aria-label={expanded ? "收起子项" : "展开子项"}
      aria-expanded={expanded}
      onClick={e => {
        e.stopPropagation();
        onExpand(record, e);
      }}
    >
      {expanded ? '−' : '+'}
    </button>
  )
}}

与分页的兼容方案

分页时保持展开状态需要稳定rowKey，并处理跨页数据关联：

jsx 复制代码

const rowKey = record => `${record.id}_${record.version}`;

expandable={{
  preserveExpandedRowKeys: true,
  expandedRowKeys,
  onExpandedRowsChange: keys => {
    localStorage.setItem('expandedKeys', JSON.stringify(keys));
    setExpandedKeys(keys);
  }
}}