前言

  小编最近在做项目的时候用的佐罗的控件来进行数据显示，佐罗的 Ant Design 的 Angular 实现地址在这里：https://ng.ant.design/docs/introduce/zh 很多样式和模板可以供我们参考和应用。下面是小编进行的一个nz-tree树的使用，仅供参考

html部分代码：

<nz-tree #treeCom [nzData]="nodes_Academy" [nzAsyncData]="false" nzCheckable="false" nzMultiple="false" [nzCheckedKeys]="defaultCheckedKeys"[nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]="defaultSelectedKeys" (nzClick)="openFolder($event,$event)">
</nz-tree>

ts部分代码

/*** 单击树结点内容加载树的子节点* @param eventData 结点数组* @param datas 结点数组*/openFolder(eventData: any, datas: NzTreeNode | NzFormatEmitEvent): void {if (datas instanceof NzTreeNode) {datas.isExpanded = !datas.isExpanded;} else {datas.node.isExpanded = !datas.node.isExpanded;eventData.node.clearChildren();if (eventData.node.level === 0) {this.nodes_profession = [];this.academyId = eventData.node.key;console.log('this.academyId', this.academyId);console.log('eventData.node.key', eventData.node.key);console.log('eventData.node', eventData.node);const url = 'exam-web/profession/findByAcademyId/' + this.academyId;this.http.get(url).subscribe(res => {if (res.json().code === ResponseCode.SUCCESSCODE) {if (res.json().length === 0) {this.tipMsgService.createMessage('温馨提示', '获取数据为空');} else {for (let i = 0; i < res.json().data.length; i++) {this.nodes_profession.push({key: res.json().data[i].id,title: res.json().data[i].name,});}eventData.node.addChildren(this.nodes_profession);}} else if (res.json().code === ResponseCode.FAILCODE) {this.tipMsgService.createMessage(ResponseCode.ErrorTip, '房间树初始化查询失败');}});} else if (eventData.node.level === 1) {this.nodes_course = [];// 结点等级为1，根据专业id查询课程树this.professionId = eventData.node.key;const url = 'exam-web/trainingPrograms/findCourseByProfessionId/' + this.professionId;this.http.get(url).subscribe(res => {if (res.json().code === ResponseCode.SUCCESSCODE) {if (res.json().length === 0) {this.tipMsgService.createMessage('温馨提示', '获取数据为空');} else {for (let i = 0; i < res.json().data.length; i++) {this.nodes_course.push({key: res.json().data[i].courseId,title: res.json().data[i].name,isLeaf: true});}eventData.node.addChildren(this.nodes_course);}} else if (res.json().code === ResponseCode.FAILCODE) {this.tipMsgService.createMessage(ResponseCode.ErrorTip, '房间树初始化查询失败');}});} else if (eventData.node.level === 2 && eventData.node.isLeaf === true) {this.courseId = eventData.node.key;this.getTableData();}}}

  小编实现的功能是点击树节点，实现单节点查询，绑定的事件是(nzClick)="openFolder($event,$event)"
  树节点的使用就在ts中，需要的可以参考小编的代码，原理就是把后端返回来的json数据赋值到树的数组中，也可以根据自己的需要在前端或者后端将内容转变

效果图展示

总结

  小编对于佐罗树的使用到这里就结束了，希望对您有所帮助