Tree树形控件

何时使用

文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

代码演示

Tree树形控件 - 图1

基本

最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。

  1. import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
  2. import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-tree-basic',
  6.   template: `
  7.     <nz-tree
  8.       #nzTreeComponent
  9.       [nzData]="nodes"
  10.       nzCheckable
  11.       [nzCheckedKeys]="defaultCheckedKeys"
  12.       [nzExpandedKeys]="defaultExpandedKeys"
  13.       [nzSelectedKeys]="defaultSelectedKeys"
  14.       (nzClick)="nzClick($event)"
  15.       (nzCheckBoxChange)="nzCheck($event)"
  16.       (nzExpandChange)="nzCheck($event)"
  17.     >
  18.     </nz-tree>
  19.   `
  20. })
  21. export class NzDemoTreeBasicComponent implements OnInit, AfterViewInit {
  22.   @ViewChild('nzTreeComponent') nzTreeComponent: NzTreeComponent;
  23.   defaultCheckedKeys = ['10020'];
  24.   defaultSelectedKeys = ['10010'];
  25.   defaultExpandedKeys = ['100', '1001'];
  27.   nodes: NzTreeNodeOptions[] = [
  28.     {
  29.       title: 'parent 1',
  30.       key: '100',
  31.       children: [
  32.         {
  33.           title: 'parent 1-0',
  34.           key: '1001',
  35.           disabled: true,
  36.           children: [
  37.             { title: 'leaf 1-0-0', key: '10010', disableCheckbox: true, isLeaf: true },
  38.             { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
  39.           ]
  40.         },
  41.         {
  42.           title: 'parent 1-1',
  43.           key: '1002',
  44.           children: [
  45.             { title: 'leaf 1-1-0', key: '10020', isLeaf: true },
  46.             { title: 'leaf 1-1-1', key: '10021', isLeaf: true }
  47.           ]
  48.         }
  49.       ]
  50.     }
  51.   ];
  53.   nzClick(event: NzFormatEmitEvent): void {
  54.     console.log(event);
  55.   }
  57.   nzCheck(event: NzFormatEmitEvent): void {
  58.     console.log(event);
  59.   }
  61.   // nzSelectedKeys change
  62.   nzSelect(keys: string[]): void {
  63.     console.log(keys, this.nzTreeComponent.getSelectedNodeList());
  64.   }
  66.   ngOnInit(): void {
  67.     // TODO something
  68.   }
  70.   ngAfterViewInit(): void {
  71.     // get node by key: '10011'
  72.     console.log(this.nzTreeComponent.getTreeNodeByKey('10011'));
  73.     // use tree methods
  74.     console.log(
  75.       this.nzTreeComponent.getTreeNodes(),
  76.       this.nzTreeComponent.getCheckedNodeList(),
  77.       this.nzTreeComponent.getSelectedNodeList(),
  78.       this.nzTreeComponent.getExpandedNodeList()
  79.     );
  80.   }
  81. }

Tree树形控件 - 图2

拖动示例

将节点拖拽到其他节点内部或前后。

  1. import { Component, OnInit } from '@angular/core';
  2. import { NzFormatEmitEvent } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-tree-draggable',
  6.   template: `
  7.     <nz-tree [nzData]="nodes" nzDraggable nzBlockNode (nzOnDrop)="nzEvent($event)"> </nz-tree>
  8.   `
  9. })
  10. export class NzDemoTreeDraggableComponent implements OnInit {
  11.   nodes = [
  12.     {
  13.       title: '0-0',
  14.       key: '00',
  15.       expanded: true,
  16.       children: [
  17.         {
  18.           title: '0-0-0',
  19.           key: '000',
  20.           expanded: true,
  21.           children: [
  22.             { title: '0-0-0-0', key: '0000', isLeaf: true },
  23.             { title: '0-0-0-1', key: '0001', isLeaf: true },
  24.             { title: '0-0-0-2', key: '0002', isLeaf: true }
  25.           ]
  26.         },
  27.         {
  28.           title: '0-0-1',
  29.           key: '001',
  30.           children: [
  31.             { title: '0-0-1-0', key: '0010', isLeaf: true },
  32.             { title: '0-0-1-1', key: '0011', isLeaf: true },
  33.             { title: '0-0-1-2', key: '0012', isLeaf: true }
  34.           ]
  35.         },
  36.         {
  37.           title: '0-0-2',
  38.           key: '002'
  39.         }
  40.       ]
  41.     },
  42.     {
  43.       title: '0-1',
  44.       key: '01',
  45.       children: [
  46.         {
  47.           title: '0-1-0',
  48.           key: '010',
  49.           children: [
  50.             { title: '0-1-0-0', key: '0100', isLeaf: true },
  51.             { title: '0-1-0-1', key: '0101', isLeaf: true },
  52.             { title: '0-1-0-2', key: '0102', isLeaf: true }
  53.           ]
  54.         },
  55.         {
  56.           title: '0-1-1',
  57.           key: '011',
  58.           children: [
  59.             { title: '0-1-1-0', key: '0110', isLeaf: true },
  60.             { title: '0-1-1-1', key: '0111', isLeaf: true },
  61.             { title: '0-1-1-2', key: '0112', isLeaf: true }
  62.           ]
  63.         }
  64.       ]
  65.     },
  66.     {
  67.       title: '0-2',
  68.       key: '02',
  69.       isLeaf: true
  70.     }
  71.   ];
  73.   nzEvent(event: NzFormatEmitEvent): void {
  74.     console.log(event);
  75.   }
  77.   ngOnInit(): void {}
  78. }

Tree树形控件 - 图3

异步数据加载

点击展开节点，动态加载数据。

  1. import { Component, OnInit } from '@angular/core';
  2. import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-tree-dynamic',
  6.   template: `
  7.     <nz-tree [nzData]="nodes" nzAsyncData (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"> </nz-tree>
  8.   `
  9. })
  10. export class NzDemoTreeDynamicComponent implements OnInit {
  11.   nodes = [
  12.     { title: 'Expand to load', key: '0' },
  13.     { title: 'Expand to load', key: '1' },
  14.     { title: 'Tree Node', key: '2', isLeaf: true }
  15.   ];
  17.   nzEvent(event: Required<NzFormatEmitEvent>): void {
  18.     console.log(event);
  19.     // load child async
  20.     if (event.eventName === 'expand') {
  21.       const node = event.node;
  22.       if (node && node.getChildren().length === 0 && node.isExpanded) {
  23.         this.loadNode().then(data => {
  24.           node.addChildren(data);
  25.         });
  26.       }
  27.     }
  28.   }
  30.   loadNode(): Promise<NzTreeNodeOptions[]> {
  31.     return new Promise(resolve => {
  32.       setTimeout(
  33.         () =>
  34.           resolve([
  35.             { title: 'Child Node', key: `${new Date().getTime()}-0` },
  36.             { title: 'Child Node', key: `${new Date().getTime()}-1` }
  37.           ]),
  38.         1000
  39.       );
  40.     });
  41.   }
  43.   ngOnInit(): void {}
  44. }

Tree树形控件 - 图4

连接线

带连接线的树。

  1. import { Component, OnInit } from '@angular/core';
  2. import { NzFormatEmitEvent } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-tree-line',
  6.   template: `
  7.     <nz-tree [nzData]="nodes" nzShowLine (nzClick)="nzEvent($event)"> </nz-tree>
  8.   `
  9. })
  10. export class NzDemoTreeLineComponent implements OnInit {
  11.   nodes = [
  12.     {
  13.       title: 'parent 1',
  14.       key: '100',
  15.       expanded: true,
  16.       children: [
  17.         {
  18.           title: 'parent 1-0',
  19.           key: '1001',
  20.           expanded: true,
  21.           children: [
  22.             { title: 'leaf', key: '10010', isLeaf: true },
  23.             { title: 'leaf', key: '10011', isLeaf: true },
  24.             { title: 'leaf', key: '10012', isLeaf: true }
  25.           ]
  26.         },
  27.         {
  28.           title: 'parent 1-1',
  29.           key: '1002',
  30.           children: [{ title: 'leaf', key: '10020', isLeaf: true }]
  31.         },
  32.         {
  33.           title: 'parent 1-2',
  34.           key: '1003',
  35.           children: [{ title: 'leaf', key: '10030', isLeaf: true }, { title: 'leaf', key: '10031', isLeaf: true }]
  36.         }
  37.       ]
  38.     }
  39.   ];
  41.   nzEvent(event: NzFormatEmitEvent): void {
  42.     console.log(event);
  43.   }
  45.   ngOnInit(): void {}
  46. }

Tree树形控件 - 图5

目录

自定义目录树(使用nzTreeTemplate实现，支持右键)。

  1. import { Component, TemplateRef } from '@angular/core';
  2. import { NzDropdownContextComponent, NzDropdownService, NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-tree-directory',
  6.   template: `
  7.     <nz-tree [nzData]="nodes" (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)">
  8.       <ng-template #contextTemplate>
  9.         <ul nz-menu nzInDropDown>
  10.           <li nz-menu-item (click)="selectDropdown()">Action 1</li>
  11.           <li nz-menu-item (click)="selectDropdown()">Action 2</li>
  12.         </ul>
  13.       </ng-template>
  14.       <ng-template #nzTreeTemplate let-node>
  15.         <span class="custom-node" [class.active]="activedNode?.key === node.key">
  16.           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, contextTemplate)">
  17.             <i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
  18.             <span class="folder-name">{{ node.title }}</span>
  19.             <span class="folder-desc">created by {{ node?.origin?.author | lowercase }}</span>
  20.           </span>
  21.           <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event, contextTemplate)">
  22.             <i nz-icon type="file"></i>
  23.             <span class="file-name">{{ node.title }}</span>
  24.             <span class="file-desc">modified by {{ node?.origin?.author | lowercase }}</span>
  25.           </span>
  26.         </span>
  27.       </ng-template>
  28.     </nz-tree>
  29.   `,
  30.   styles: [
  31.     `
  32.       :host ::ng-deep .ant-tree {
  33.         overflow: hidden;
  34.         margin: 0 -24px;
  35.         padding: 0 24px;
  36.       }
  38.       :host ::ng-deep .ant-tree li {
  39.         padding: 4px 0 0 0;
  40.       }
  42.       .custom-node {
  43.         cursor: pointer;
  44.         line-height: 24px;
  45.         margin-left: 4px;
  46.         display: inline-block;
  47.         margin: 0 -1000px;
  48.         padding: 0 1000px;
  49.       }
  51.       .active {
  52.         background: #1890ff;
  53.         color: #fff;
  54.       }
  56.       .file-name,
  57.       .folder-name {
  58.         margin-left: 4px;
  59.       }
  61.       .file-desc,
  62.       .folder-desc {
  63.         padding: 0 8px;
  64.         display: inline-block;
  65.         background: #87ceff;
  66.         color: #ffffff;
  67.         position: relative;
  68.         left: 12px;
  69.       }
  70.     `
  71.   ]
  72. })
  73. export class NzDemoTreeDirectoryComponent {
  74.   dropdown: NzDropdownContextComponent;
  75.   // actived node
  76.   activedNode: NzTreeNode;
  77.   nodes = [
  78.     {
  79.       title: 'parent 0',
  80.       key: '100',
  81.       author: 'NG ZORRO',
  82.       expanded: true,
  83.       children: [
  84.         { title: 'leaf 0-0', key: '1000', author: 'NG ZORRO', isLeaf: true },
  85.         { title: 'leaf 0-1', key: '1001', author: 'NG ZORRO', isLeaf: true }
  86.       ]
  87.     },
  88.     {
  89.       title: 'parent 1',
  90.       key: '101',
  91.       author: 'NG ZORRO',
  92.       children: [
  93.         { title: 'leaf 1-0', key: '1010', author: 'NG ZORRO', isLeaf: true },
  94.         { title: 'leaf 1-1', key: '1011', author: 'NG ZORRO', isLeaf: true }
  95.       ]
  96.     }
  97.   ];
  99.   openFolder(data: NzTreeNode | Required<NzFormatEmitEvent>): void {
  100.     // do something if u want
  101.     if (data instanceof NzTreeNode) {
  102.       data.isExpanded = !data.isExpanded;
  103.     } else {
  104.       const node = data.node;
  105.       if (node) {
  106.         node.isExpanded = !node.isExpanded;
  107.       }
  108.     }
  109.   }
  111.   activeNode(data: NzFormatEmitEvent): void {
  112.     this.activedNode = data.node!;
  113.   }
  115.   contextMenu($event: MouseEvent, template: TemplateRef<void>): void {
  116.     this.dropdown = this.nzDropdownService.create($event, template);
  117.   }
  119.   selectDropdown(): void {
  120.     this.dropdown.close();
  121.     // do something
  122.   }
  124.   constructor(private nzDropdownService: NzDropdownService) {}
  125. }

Tree树形控件 - 图6

受控操作示例

受控操作示例(默认)。

  1. import { Component, OnInit } from '@angular/core';
  2. import { NzFormatEmitEvent } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-tree-basic-controlled',
  6.   template: `
  7.     <nz-tree
  8.       [nzData]="nodes"
  9.       nzCheckable
  10.       nzMultiple
  11.       [nzCheckedKeys]="defaultCheckedKeys"
  12.       [nzExpandedKeys]="defaultExpandedKeys"
  13.       [nzSelectedKeys]="defaultSelectedKeys"
  14.       (nzClick)="nzEvent($event)"
  15.       (nzExpandChange)="nzEvent($event)"
  16.       (nzCheckBoxChange)="nzEvent($event)"
  17.     >
  18.     </nz-tree>
  19.   `
  20. })
  21. export class NzDemoTreeBasicControlledComponent implements OnInit {
  22.   defaultCheckedKeys = ['0-0-0'];
  23.   defaultSelectedKeys = ['0-0-0'];
  24.   defaultExpandedKeys = ['0-0', '0-0-0', '0-0-1'];
  26.   nodes = [
  27.     {
  28.       title: '0-0',
  29.       key: '0-0',
  30.       expanded: true,
  31.       children: [
  32.         {
  33.           title: '0-0-0',
  34.           key: '0-0-0',
  35.           children: [
  36.             { title: '0-0-0-0', key: '0-0-0-0', isLeaf: true },
  37.             { title: '0-0-0-1', key: '0-0-0-1', isLeaf: true },
  38.             { title: '0-0-0-2', key: '0-0-0-2', isLeaf: true }
  39.           ]
  40.         },
  41.         {
  42.           title: '0-0-1',
  43.           key: '0-0-1',
  44.           children: [
  45.             { title: '0-0-1-0', key: '0-0-1-0', isLeaf: true },
  46.             { title: '0-0-1-1', key: '0-0-1-1', isLeaf: true },
  47.             { title: '0-0-1-2', key: '0-0-1-2', isLeaf: true }
  48.           ]
  49.         },
  50.         {
  51.           title: '0-0-2',
  52.           key: '0-0-2',
  53.           isLeaf: true
  54.         }
  55.       ]
  56.     },
  57.     {
  58.       title: '0-1',
  59.       key: '0-1',
  60.       children: [
  61.         { title: '0-1-0-0', key: '0-1-0-0', isLeaf: true },
  62.         { title: '0-1-0-1', key: '0-1-0-1', isLeaf: true },
  63.         { title: '0-1-0-2', key: '0-1-0-2', isLeaf: true }
  64.       ]
  65.     },
  66.     {
  67.       title: '0-2',
  68.       key: '0-2',
  69.       isLeaf: true
  70.     }
  71.   ];
  73.   nzEvent(event: NzFormatEmitEvent): void {
  74.     console.log(event);
  75.   }
  77.   ngOnInit(): void {}
  78. }

Tree树形控件 - 图7

拖动示例-二次校验

nzBeforeDrop: 在拖拽放置事件(drop事件)之前做校验, 例如仅允许拖拽到内部(延时一秒)、放置前结合modal验证等。

  1. import { Component, OnInit } from '@angular/core';
  2. import { NzFormatBeforeDropEvent } from 'ng-zorro-antd';
  3. import { of, Observable } from 'rxjs';
  4. import { delay } from 'rxjs/operators';
  6. @Component({
  7.   selector: 'nz-demo-tree-draggable-confirm',
  8.   template: `
  9.     <nz-tree [nzData]="nodes" nzDraggable nzBlockNode [nzBeforeDrop]="beforeDrop"> </nz-tree>
  10.   `
  11. })
  12. export class NzDemoTreeDraggableConfirmComponent implements OnInit {
  13.   nodes = [
  14.     {
  15.       title: '0-0',
  16.       key: '100',
  17.       expanded: true,
  18.       children: [
  19.         {
  20.           title: '0-0-0',
  21.           key: '1001',
  22.           children: [{ title: '0-0-0-0', key: '10010', isLeaf: true }, { title: '0-0-0-1', key: '10011', isLeaf: true }]
  23.         },
  24.         {
  25.           title: '0-0-1',
  26.           key: '1002',
  27.           children: [{ title: '0-0-1-0', key: '10020', isLeaf: true }]
  28.         }
  29.       ]
  30.     }
  31.   ];
  33.   beforeDrop(arg: NzFormatBeforeDropEvent): Observable<boolean> {
  34.     // if insert node into another node, wait 1s
  35.     if (arg.pos === 0) {
  36.       return of(true).pipe(delay(1000));
  37.     } else {
  38.       return of(false);
  39.     }
  40.   }
  42.   ngOnInit(): void {}
  43. }

Tree树形控件 - 图8

可搜索

可搜索的树。

  1. import { Component, OnInit } from '@angular/core';
  2. import { NzFormatEmitEvent } from 'ng-zorro-antd';
  4. @Component({
  5.   selector: 'nz-demo-tree-search',
  6.   template: `
  7.     <nz-input-group [nzSuffix]="suffixIcon">
  8.       <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
  9.     </nz-input-group>
  10.     <ng-template #suffixIcon>
  11.       <i nz-icon type="search"></i>
  12.     </ng-template>
  13.     <nz-tree
  14.       [nzData]="nodes"
  15.       [nzSearchValue]="searchValue"
  16.       (nzClick)="nzEvent($event)"
  17.       (nzExpandChange)="nzEvent($event)"
  18.       (nzSearchValueChange)="nzEvent($event)"
  19.     >
  20.     </nz-tree>
  21.   `,
  22.   styles: [
  23.     `
  24.       nz-input-group {
  25.         padding: 10px 0;
  26.       }
  27.     `
  28.   ]
  29. })
  30. export class NzDemoTreeSearchComponent implements OnInit {
  31.   searchValue = '';
  33.   nodes = [
  34.     {
  35.       title: '0-0',
  36.       key: '0-0',
  37.       children: [
  38.         {
  39.           title: '0-0-0',
  40.           key: '0-0-0',
  41.           children: [
  42.             { title: '0-0-0-0', key: '0-0-0-0', isLeaf: true },
  43.             { title: '0-0-0-1', key: '0-0-0-1', isLeaf: true },
  44.             { title: '0-0-0-2', key: '0-0-0-2', isLeaf: true }
  45.           ]
  46.         },
  47.         {
  48.           title: '0-0-1',
  49.           key: '0-0-1',
  50.           children: [
  51.             { title: '0-0-1-0', key: '0-0-1-0', isLeaf: true },
  52.             { title: '0-0-1-1', key: '0-0-1-1', isLeaf: true },
  53.             { title: '0-0-1-2', key: '0-0-1-2', isLeaf: true }
  54.           ]
  55.         },
  56.         {
  57.           title: '0-0-2',
  58.           key: '0-0-2',
  59.           isLeaf: true
  60.         }
  61.       ]
  62.     },
  63.     {
  64.       title: '0-1',
  65.       key: '0-1',
  66.       children: [
  67.         { title: '0-1-0-0', key: '0-1-0-0', isLeaf: true },
  68.         { title: '0-1-0-1', key: '0-1-0-1', isLeaf: true },
  69.         { title: '0-1-0-2', key: '0-1-0-2', isLeaf: true }
  70.       ]
  71.     },
  72.     {
  73.       title: '0-2',
  74.       key: '0-2',
  75.       isLeaf: true
  76.     }
  77.   ];
  79.   nzEvent(event: NzFormatEmitEvent): void {
  80.     console.log(event);
  81.   }
  83.   ngOnInit(): void {}
  84. }

Tree树形控件 - 图9

自定义图标

可以针对不同的节点定制图标。

  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-tree-customized-icon',
  5.   template: `
  6.     <nz-tree [nzData]="nodes" nzShowIcon [nzExpandedIcon]="expandedIconTpl">
  7.       <ng-template #expandedIconTpl let-node>
  8.         <i nz-icon [type]="node.origin.icon" class="ant-tree-switcher-icon"></i>
  9.       </ng-template>
  10.     </nz-tree>
  11.     <nz-tree [nzData]="nodes" nzShowIcon [nzExpandedIcon]="mutiExpandedIconTpl">
  12.       <ng-template #mutiExpandedIconTpl let-node>
  13.         <i
  14.           *ngIf="!node.origin.isLeaf"
  15.           nz-icon
  16.           [type]="node.isExpanded ? 'folder-open' : 'folder'"
  17.           class="ant-tree-switcher-line-icon"
  18.         ></i>
  19.         <i *ngIf="node.origin.isLeaf" nz-icon type="file" class="ant-tree-switcher-line-icon"></i>
  20.       </ng-template>
  21.     </nz-tree>
  22.   `
  23. })
  24. export class NzDemoTreeCustomizedIconComponent implements OnInit {
  25.   nodes = [
  26.     {
  27.       title: 'parent 1',
  28.       key: '100',
  29.       expanded: true,
  30.       icon: 'anticon anticon-smile-o',
  31.       children: [
  32.         { title: 'leaf', key: '1001', icon: 'anticon anticon-meh-o', isLeaf: true },
  33.         { title: 'leaf', key: '1002', icon: 'anticon anticon-frown-o', isLeaf: true }
  34.       ]
  35.     }
  36.   ];
  38.   ngOnInit(): void {}
  39. }

API

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

  1. import { NzTreeModule } from 'ng-zorro-antd';

nz-treecomponent

参数说明类型默认值
[nzData]元数据NzTreeNodeOptions[]｜NzTreeNode[][]
[nzBlockNode]是否节点占据一行booleanfalse
[nzCheckable]节点前添加 Checkbox 复选框booleanfalse
[nzShowExpand]节点前添加展开图标booleantrue
[nzShowLine]是否展示连接线booleanfalse
[nzExpandedIcon]自定义展开图标TemplateRef<{ $implicit: NzTreeNode }>-
[nzShowIcon]是否展示 TreeNode title 前的图标，没有默认样式booleanfalse
[nzAsyncData]是否异步加载(显示加载状态)booleanfalse
[nzDraggable]设置节点可拖拽（IE>8）booleanfalse
[nzMultiple]支持点选多个节点（节点本身）booleanfalse
[nzHideUnMatched]搜索隐藏未匹配的节点booleanfalse
[nzCheckStrictly]checkable状态下节点选择完全受控（父子节点选中状态不再关联）booleanfalse
[nzExpandAll]默认展开所有树节点booleanfalse
[nzExpandedKeys]展开指定的树节点string[][]
[nzCheckedKeys]指定选中复选框的树节点string[][]
[nzSelectedKeys]指定选中的树节点string[][]
[nzSearchValue]按需筛选树高亮节点(参考可搜索的树),双向绑定stringnull
[nzBeforeDrop]drop前二次校验,允许用户自行决定是否允许放置(confirm: NzFormatBeforeDropEvent) => Observable<boolean>-
(nzClick)点击树节点触发EventEmitter<NzFormatEmitEvent>-
(nzDblClick)双击树节点触发EventEmitter<NzFormatEmitEvent>-
(nzContextMenu)右键树节点触发EventEmitter<NzFormatEmitEvent>-
(nzCheckBoxChange)点击树节点 Checkbox 触发EventEmitter<NzFormatEmitEvent>-
(nzExpandChange)点击展开树节点图标触发EventEmitter<NzFormatEmitEvent>-
(nzSearchValueChange)搜索节点时调用(与nzSearchValue配合使用)EventEmitter<NzFormatEmitEvent>-
(nzOnDragStart)开始拖拽时调用EventEmitter<NzFormatEmitEvent>-
(nzOnDragEnter)dragenter 触发时调用EventEmitter<NzFormatEmitEvent>-
(nzOnDragOver)dragover 触发时调用EventEmitter<NzFormatEmitEvent>-
(nzOnDragLeave)dragleave 触发时调用EventEmitter<NzFormatEmitEvent>-
(nzOnDrop)drop 触发时调用EventEmitter<NzFormatEmitEvent>-
(nzOnDragEnd)dragend 触发时调用EventEmitter<NzFormatEmitEvent>-

方法

方法名说明返回值
getTreeNodes获取组件 NzTreeNode 节点NzTreeNode[]
getTreeNodeByKey按 key 获取 NzTreeNode 节点NzTreeNode
getCheckedNodeList获取组件 checkBox 被点击选中的节点NzTreeNode[]
getSelectedNodeList获取组件被选中的节点NzTreeNode[]
getHalfCheckedNodeList获取组件半选状态节点NzTreeNode[]
getExpandedNodeList获取组件展开状态节点NzTreeNode[]
getMatchedNodeList获取组搜索匹配到的节点NzTreeNode[]

NzTreeNodeOptions props

参数说明类型默认值
title标题string-
key整个树范围内的所有节点的 key 值不能重复且不为空！string-
icon节点前的图标，与 nzShowIcon 组合使用string-
children子节点NzTreeNodeOptions[]-
isLeaf设置为叶子节点(叶子节点不可被拖拽模式放置)booleanfalse
checked设置节点 Checkbox 是否选中booleanfalse
selected设置节点本身是否选中booleanfalse
expanded设置节点是否展开(叶子节点无效)booleanfalse
selectable设置节点是否可被选中booleantrue
disabled设置是否禁用节点(不可进行任何操作)booleanfalse
disableCheckbox设置节点禁用 Checkboxbooleanfalse
[key: string]自定义数据,可通过 NzTreeNode 的 origin 字段获取any-

NzFormatEmitEvent props

属性说明类型默认值
eventName事件名enum: clickdblclickcontextmenucheckexpandsearch & dragstartdragenterdragoverdragleavedropdragend-
node当前操作节点(拖拽时表示目标节点)NzTreeNodenull
event原生事件'MouseEvent'｜'DragEvent'null
dragNode?当前拖拽节点(拖拽时存在)NzTreeNodenull
selectedKeys?已选中的节点key(单击时存在)NzTreeNode[][]
checkedKeys?checkBox 已选中的节点key(点击 checkBox 存在)NzTreeNode[][]
matchedKeys?搜索时匹配到的节点keyNzTreeNode[][]
keys?非拖拽事件相关的全部节点的key数组string[][]
nodes?非拖拽事件相关的全部节点NzTreeNode[][]

NzFormatBeforeDropEvent props

属性说明类型默认值
dragNode当前拖拽节点(拖拽时存在)NzTreeNode-
node当前操作节点(拖拽时表示目标节点)NzTreeNode-
pos放置位置(-1:目标节点前面, 0: 目标节点内部, 1: 目标节点后面)number-

NzTreeNode props

属性说明类型默认值
title标题stringNzTreeNodeOptions.title
keykey值stringNzTreeNodeOptions.key
level层级(最顶层为0,子节点逐层加1)numbernumber
children子节点NzTreeNode[][]
origin原始节点树结构(用户提供,用于展示额外信息)NzTreeNodeOptions-
getParentNode获取父节点functionnull
isLeaf是否为叶子节点booleanfalse
isExpanded是否已展开booleanfalse
isDisabled是否禁用booleanfalse
isDisableCheckbox是否禁用 checkBoxbooleanfalse
isSelectable是否可选中booleantrue
isChecked是否选中 checkBoxbooleanfalse
isHalfChecked子节点有选中但未全选booleanfalse
isSelected是否已选中booleanfalse
isLoading是否异步加载状态(影响展开图标展示)booleanfalse
isMatchedtitle是否包含nzSearchValue(搜索使用)booleanfalse
setSyncChecked设置 checked 状态并同步其他节点状态function-
getChildren获取子节点,返回NzTreeNode数组function-
addChildren添加子节点,接收NzTreeNode或NzTreeNodeOptions数组,第二个参数为插入的索引位置,默认插入末尾(children: array, index?: number )=>{}-
clearChildren清除子节点function-
remove清除当前节点(非根节点)function-

注意

  • NzTreeNodeOptions 可以接受用户自定义属性，可通过 NzTreeNode 的 origin 属性取得。
  • 使用 ViewChild 时，Tree 方法需要在 ngAfterViewInit 中调用。
  • nzData 属性请传递 NzTreeNodeOptions 数组，传递 NzTreeNode 数组模式将在 8.x 版本取消兼容。