如何在Mat Nested Tree中为父子节点添加连接线？

我明白你已经搞定了节点框和图标，就差连接线这一步啦！其实通过CSS伪元素配合<ul>、<li>的嵌套结构，完全可以画出清晰的树状连接线，下面是具体的实现方案：

首先，我们要利用Mat Nested Tree生成的DOM结构——它本质是嵌套的<ul>和<li>，我们通过给这些元素添加伪元素（::before、::after）来绘制线条，不需要额外的DOM元素。

完整CSS代码 #

/* 给树容器设置基础样式，可根据你的实际类名调整 */
.mat-nested-tree-container {
  padding-left: 20px;
  position: relative;
}

/* 处理每个节点的li元素 */
.mat-nested-tree-container li {
  position: relative;
  padding-left: 25px;
  list-style: none;
  margin: 8px 0;
}

/* 绘制节点左侧的竖线 */
.mat-nested-tree-container li::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 1px;
  height: calc(100% + 16px);
  background-color: #ccc; /* 可根据主题调整线条颜色 */
}

/* 绘制节点上方的横线 */
.mat-nested-tree-container li::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 20px;
  height: 1px;
  background-color: #ccc;
}

/* 去掉顶层第一个节点上方的空白竖线 */
.mat-nested-tree-container > li:first-child::before {
  top: 8px;
  height: calc(100% - 8px);
}

/* 去掉最后一个节点下方多余的竖线，让线条更自然 */
.mat-nested-tree-container li:last-child::before {
  height: calc(8px + 100%);
}

/* 调整嵌套ul的内边距，保证线条对齐 */
.mat-nested-tree-container ul {
  padding-left: 20px;
  margin: 0;
}

怎么应用？ #

你只需要把这段CSS加到组件的样式文件里，然后给你的Mat Tree容器（比如包裹<mat-tree>的元素）加上对应的类名（比如上面的mat-nested-tree-container）。如果你的树结构有自定义类名，替换掉CSS里的类名即可。

关键细节说明 #

• 伪元素::before负责绘制竖线，贯穿节点的上下区域；::after负责绘制横线，连接到父节点的竖线。
• 通过last-child和first-child选择器，优化边缘节点的线条显示，避免出现多余的空白线条。
• 你可以调整background-color修改线条颜色，调整padding、width、height等值来适配你的节点大小和间距。

这样修改后，你的Mat Nested Tree就能显示清晰的节点连接线啦，完全通过CSS实现，不需要改动组件逻辑~

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