角材料-为树添加分支线吗？

Question

我用Angular material tree创建了一个简单的树：

https://stackblitz.com/edit/angular-exhejg-vx5i7c?file=app/tree-dynamic-example.html

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding   >
    <button mat-icon-button ></button>
    {{node.item}}
  </mat-tree-node>


  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding   >
    <button mat-icon-button 
            [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.item + '2'}}
    <mat-progress-bar *ngIf="node.isLoading"
                      mode="indeterminate"
                      class="example-tree-progress-bar"></mat-progress-bar>
  </mat-tree-node>


</mat-tree>

它看起来像：

但是如何添加分支线？类似于（来自here）：

Answer 1

没有现成的功能。但是您可以通过CSS来应用它。 有一个working example

Answer 2

this page 我正在使用 mat-nested-tree。 步骤 1 为两个 li 添加左边框。 step-2 在 li 中添加另一个 div。 在css下面应用 看图...

.setBorder{
  border-bottom: 1px solid black;
  width: 22px;
  height: 0px;
  position: relative;
  left: 0px;
  top: 0px;
}
.borderMain{
  border-left: 1px solid black;
}

Answer 3

当两个节点在一个父节点下展开时，该行会中断

Answer 4

参考 https://stackoverflow.com/a/52203131/14783892，更改此：

.mat-nested-tree-node:last-child ul {
  border-left: 1px solid white;
  margin-left: -41px;
}

为此：

.mat-nested-tree-node:last-child > li > ul {
  border-left: 1px solid #fff;
  margin-left: -41px;
}

此更改应解决换行问题。