如何在Syncfusion Angular TreeGrid中显示层级数据引导线条/连接器？

不同UI组件库或自定义Tree Grid都能实现这类层级引导线条，以下是几种常见方案：

1. 利用组件库自带配置（推荐） #

大部分成熟的Tree Grid组件都内置了相关开关或样式配置：

• PrimeNG TreeTable：开启showGridlines属性后，通过自定义CSS调整线条样式匹配需求：

<p-treeTable [value]="treeData" [showGridlines]="true">
  <!-- 列定义内容 -->
</p-treeTable>

/* 自定义蓝色层级线条 */
.p-treetable .p-treetable-tbody > tr > td {
  border-left: 1px solid #42a5f5;
  position: relative;
}
.p-treetable .p-treetable-tbody > tr.p-treetable-expanded > td::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  height: 100%;
  border-left: 1px solid #42a5f5;
}

• AG Grid：启用Tree Data模式后，通过自定义单元格渲染器添加线条：

const gridOptions = {
  treeData: true,
  autoGroupColumnDef: {
    cellRendererParams: {
      suppressCount: true,
      innerRenderer: (params) => {
        return `<div style="border-left: 1px solid #42a5f5; padding-left: 12px;">${params.value}</div>`;
      }
    }
  },
  // 其他网格配置
};

2. 自定义Tree Grid的实现方式 #

如果是自己实现的Tree Grid，可通过CSS伪元素结合层级类来绘制线条：

1. 给每行根据数据层级添加对应的类（如level-1、level-2）
2. 编写CSS绘制纵向和横向连接线条：

.tree-grid-row .cell {
  padding-left: 20px;
}
.tree-grid-row.level-2 .cell {
  padding-left: 40px;
  position: relative;
}
/* 纵向线条 */
.tree-grid-row.level-2 .cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  height: 100%;
  border-left: 1px solid #42a5f5;
}
/* 横向连接线条 */
.tree-grid-row.level-2 .cell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  border-top: 1px solid #42a5f5;
}

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