如何在Ant Design Table中使用原生标准展开图标（避免新增列）

核心思路 #

不想通过expandedRowRender/rowExpandable新增列，又要复用原生展开图标样式，关键是直接调用Ant Design内置的展开图标组件，而非自行编写DOM结构。

具体实现步骤 #

1. 导入原生展开图标组件
   在antd@4.x版本中，展开图标是Table内部的ExpandIcon，可直接从antd的table模块导入：

   import ExpandIcon from 'antd/lib/table/ExpandIcon';
   

2. 在自定义expandIcon中使用原生组件
   配置Table的expandIcon属性时，直接渲染ExpandIcon并传入必要参数，确保样式和交互与原生完全一致：

   <Table
     columns={columns}
     dataSource={data}
     expandIcon={({ expanded, onExpand, record }) => (
       <ExpandIcon
         expanded={expanded}
         onExpand={onExpand}
         record={record}
         expandable={true} // 可根据业务逻辑动态设置，比如基于record判断是否允许展开
       />
     )}
     // 其他Table属性
   />
   

3. 自定义触发逻辑的兼容处理
   若需要在点击图标时添加额外业务逻辑，可包裹一层元素并调用原生展开方法：

   expandIcon={({ expanded, onExpand, record }) => (
     <div onClick={(e) => {
       // 自定义业务逻辑
       console.log('触发展开操作', record);
       // 调用原生展开方法
       onExpand(record, e);
     }}>
       <ExpandIcon
         expanded={expanded}
         record={record}
         expandable={true}
       />
     </div>
   )}
   

4. 清理干扰样式
   若之前自定义了样式影响原生效果，需做以下处理：

   • 移除自定义的图标样式类（如custom-expand-icon这类自定义类名）
   • 清除对.ant-table-row-expand-icon相关原生样式的覆盖

关键说明 #

• 直接使用ExpandIcon组件可完全复用Ant Design的原生样式，包括展开/收起的旋转动画、hover状态等
• 该方式不会新增列，完全通过自定义expandIcon实现，符合需求
• 针对antd@4.25.15版本，此组件API稳定，无版本兼容问题

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