如何为Ant Design树形表格添加线条样式？

Ant Design的TreeTable组件本身没有内置层级连接线的配置项，但可以通过自定义CSS结合组件自带的树形结构类名实现需求，以下是具体实现方案：

实现步骤 #

1. 基础表格配置 #

确保你的TreeTable已正确开启树形模式，示例代码如下（React）：

import { Table } from 'antd';

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    treeCol: true, // 设置为树形列
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc',
  },
];

const data = [
  {
    key: '1',
    name: '父节点1',
    desc: '父节点描述',
    children: [
      {
        key: '1-1',
        name: '子节点1-1',
        desc: '子节点描述',
      },
      {
        key: '1-2',
        name: '子节点1-2',
        desc: '子节点描述',
        children: [
          {
            key: '1-2-1',
            name: '孙节点1-2-1',
            desc: '孙节点描述',
          },
        ],
      },
    ],
  },
];

export default function TreeTableWithLines() {
  return <Table columns={columns} dataSource={data} treeDefaultExpandAll />;
}

2. 自定义CSS绘制连接线 #

通过组件的.ant-table-treenode、.ant-table-indent等类名，利用CSS伪元素绘制垂直和水平线条：

/* 树形表格连接线样式 */
.ant-table-treenode {
  position: relative;
}

/* 垂直线条 */
.ant-table-indent:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  width: 1px;
  height: 100%;
  border-left: 1px dashed #d9d9d9;
}

/* 水平线条 */
.ant-table-treenode::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  width: 16px;
  border-top: 1px dashed #d9d9d9;
}

/* 处理最后一个子节点的垂直线条，避免多余延伸 */
.ant-table-treenode:last-child > .ant-table-indent::before {
  height: 18px;
}

注意事项 #

• 可根据需求调整线条样式（实线/虚线、颜色、宽度），修改CSS中的border-left和border-top属性即可。
• 若表格使用深色主题，需将线条颜色调整为对应主题的边框色（如#434343）。
• 折叠/展开状态下线条会自动适配，伪元素基于树形节点结构渲染。

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