下面展示如何在列表中展示一个树状结构，能新增节点、编辑节点、新增下级：

首先列表上方是新增按钮，点击后调用新增方法：

<div class="table-header"><button nz-button nzType="info" (click)="addOrEditDept(1)">新增</button>
</div>

新增一级节点、新增下级和编辑节点的方法是共用的，通过传参数不同来进行不同操作：

public addOrEditDept(type: number, target?: DeptServiceNs.DeptItemModel) {this.targetDept = target;this.tabPageType = type;if (type === TabPageType.EditPage) {   // 判断是新增操作还是编辑操作this.addOrEditName = target.name;}}

新增、编辑页面上的保存按钮上的方法： 

public editOrAddSubmit() {if (this.addOrEditName.length === 0) {this.messageService.showToastMessage('请输入部门名称', 'warning');return;}if (this.tabPageType === TabPageType.EditPage) {this.updateDept(this.targetDept, this.addOrEditName);      // 1、调用编辑方法，调接口传参即可，此处省略} else if (this.tabPageType === TabPageType.AddPage) {this.addDept(this.addOrEditName, this.targetDept);         // 2、调用新增方法，调接口传参即可，此处省略} else {return;}}

以上是编辑和新增的方法的调用，这两个方法在接下来的列表中也同样被用到，接下来是列表的写法（这是一个最低层级为三级的简单列表）：

<nz-table nzSize="small" [nzShowPagination]="false" [nzData]="deptDataList" [nzBordered]="true" [nzLoading]="loading"><thead><tr><th [nzWidth]="'60%'">部门名称</th><th [nzWidth]="'40%'">操作</th></tr></thead><tbody><ng-container *ngFor="let oneLevel of deptDataList;trackBy:trackById;"><tr><td><i class="anticon anticon-plus-square-o" (click)="expandDepts(oneLevel)"*ngIf="oneLevel.leaf === 0 && !oneLevel.expand"></i><i class="anticon anticon-minus-square-o" (click)="expandDepts(oneLevel)"*ngIf="oneLevel.leaf === 0 && oneLevel.expand"></i><span>{{oneLevel.name}}</span></td><td><span class="operate-text" (click)="addOrEditDept(2,oneLevel)">编辑</span><span class="operate-text" (click)="deleteDept(oneLevel)">删除</span><span class="operate-text" (click)="addOrEditDept(1,oneLevel)">添加下级</span></td></tr><ng-container *ngIf="oneLevel.expand && oneLevel.children"><ng-container *ngFor="let twoLevel of oneLevel.children;trackBy:trackById;"><tr><td [ngStyle]="{paddingLeft:'30px'}"><i class="anticon anticon-plus-square-o" (click)="expandDepts(twoLevel)"*ngIf="twoLevel.leaf === 0 && !twoLevel.expand"></i><i class="anticon anticon-minus-square-o" (click)="expandDepts(twoLevel)"*ngIf="twoLevel.leaf === 0 && twoLevel.expand"></i><span>{{twoLevel.name}}</span></td><td><span class="operate-text" (click)="addOrEditDept(2,twoLevel)">编辑</span><span class="operate-text" (click)="deleteDept(twoLevel,oneLevel)">删除</span><span class="operate-text" (click)="addOrEditDept(1,twoLevel)">添加下级</span></td></tr><ng-container *ngIf="twoLevel.expand && twoLevel.children"><ng-container *ngFor="let threeLevel of twoLevel.children;trackBy:trackById;"><tr><td [ngStyle]="{paddingLeft:'60px'}"><span>{{threeLevel.name}}</span></td><td><span class="operate-text" (click)="addOrEditDept(2,threeLevel)">编辑</span><span class="operate-text" (click)="deleteDept(threeLevel,twoLevel)">删除</span></td></tr></ng-container></ng-container></ng-container></ng-container></ng-container></tbody></nz-table>

列表数据源是deptDataList，是我们在component.ts文件中调用后端接口得到的数据，通过 *ngFor 遍历这个表格，每个一级节点的数据用oneLevel （将deptDataList中每个节点的数据命名为oneLevel ）暂存，然后再对每个节点的数据进行编辑就变得简单得多了！

同样的，所有二级节点的数据 twoLevel 是从一级节点中遍历出来的，三级节点的数据 threeLevel 又是从二级节点中遍历出来的，我们要做的就是先判断当前操作的节点是否有子节点children ，而且是否被展开即可！