Tree树形控件

何时使用

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

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

代码演示Tree树形控件 - 图2

Tree树形控件 - 图3

基本

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

  1. import { AfterViewInit, Component, ViewChild } from '@angular/core';
  2. import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
  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.       (nzContextMenu)="nzClick($event)"
  16.       (nzCheckBoxChange)="nzCheck($event)"
  17.       (nzExpandChange)="nzCheck($event)"
  18.     >
  19.     </nz-tree>
  20.   `
  21. })
  22. export class NzDemoTreeBasicComponent implements AfterViewInit {
  23.   @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
  24.   defaultCheckedKeys = ['10020'];
  25.   defaultSelectedKeys = ['10010'];
  26.   defaultExpandedKeys = ['100', '1001'];
  28.   nodes: NzTreeNodeOptions[] = [
  29.     {
  30.       title: 'parent 1',
  31.       key: '100',
  32.       children: [
  33.         {
  34.           title: 'parent 1-0',
  35.           key: '1001',
  36.           disabled: true,
  37.           children: [
  38.             { title: 'leaf 1-0-0', key: '10010', disableCheckbox: true, isLeaf: true },
  39.             { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
  40.           ]
  41.         },
  42.         {
  43.           title: 'parent 1-1',
  44.           key: '1002',
  45.           children: [
  46.             { title: 'leaf 1-1-0', key: '10020', isLeaf: true },
  47.             { title: 'leaf 1-1-1', key: '10021', isLeaf: true }
  48.           ]
  49.         }
  50.       ]
  51.     }
  52.   ];
  54.   nzClick(event: NzFormatEmitEvent): void {
  55.     console.log(event);
  56.   }
  58.   nzCheck(event: NzFormatEmitEvent): void {
  59.     console.log(event);
  60.   }
  62.   // nzSelectedKeys change
  63.   nzSelect(keys: string[]): void {
  64.     console.log(keys, this.nzTreeComponent.getSelectedNodeList());
  65.   }
  67.   ngAfterViewInit(): void {
  68.     // get node by key: '10011'
  69.     console.log(this.nzTreeComponent.getTreeNodeByKey('10011'));
  70.     // use tree methods
  71.     console.log(
  72.       this.nzTreeComponent.getTreeNodes(),
  73.       this.nzTreeComponent.getCheckedNodeList(),
  74.       this.nzTreeComponent.getSelectedNodeList(),
  75.       this.nzTreeComponent.getExpandedNodeList()
  76.     );
  77.   }
  78. }

Tree树形控件 - 图4

拖动示例

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

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

Tree树形控件 - 图5

异步数据加载

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

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

Tree树形控件 - 图6

连接线

带连接线的树。

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

Tree树形控件 - 图7

目录

使用 nzTreeTemplate 实现自定义目录结构，通过 let-origin="origin" 获得原始数据，let-node 获取当前节点状态。

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

Tree树形控件 - 图8

受控操作示例

受控操作示例(默认)。

  1. import { Component } from '@angular/core';
  2. import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
  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 {
  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.   }
  76. }

Tree树形控件 - 图9

拖动示例-二次校验

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

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

Tree树形控件 - 图10

可搜索

可搜索的树。

  1. import { Component } from '@angular/core';
  2. import { NzFormatEmitEvent } from 'ng-zorro-antd/tree';
  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 nzType="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.         margin-bottom: 12px;
  26.       }
  27.     `
  28.   ]
  29. })
  30. export class NzDemoTreeSearchComponent {
  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.   }
  82. }

Tree树形控件 - 图11

自定义图标

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

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

Tree树形控件 - 图12

虚拟滚动

设定 nzVirtualHeight 开启虚拟滚动。

  1. import { Component, OnInit } from '@angular/core';
  2. import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';
  4. @Component({
  5.   selector: 'nz-demo-tree-virtual-scroll',
  6.   template: ` <nz-tree [nzData]="nodes" nzBlockNode nzVirtualHeight="300px"></nz-tree> `
  7. })
  8. export class NzDemoTreeVirtualScrollComponent implements OnInit {
  9.   nodes: NzTreeNodeOptions[] = [];
  10.   ngOnInit(): void {
  11.     const dig = (path = '0', level = 3) => {
  12.       const list = [];
  13.       for (let i = 0; i < 10; i += 1) {
  14.         const key = `${path}-${i}`;
  15.         const treeNode: NzTreeNodeOptions = {
  16.           title: key,
  17.           key,
  18.           expanded: true,
  19.           children: [],
  20.           isLeaf: false
  21.         };
  23.         if (level > 0) {
  24.           treeNode.children = dig(key, level - 1);
  25.         } else {
  26.           treeNode.isLeaf = true;
  27.         }
  29.         list.push(treeNode);
  30.       }
  31.       return list;
  32.     };
  34.     this.nodes = dig();
  35.   }
  36. }

API

nz-treecomponent

说明: 根据目前的数据结构设计，需要保证优先设置 nzData，否则各属性不会生效。异步操作待数据返回后，重新赋值其他各属性触发渲染(nzExpandAll``nzExpandedKeys``nzCheckedKeys``nzSelectedKeys``nzSearchValue)。重构优化工作请追踪 #5152。

参数说明类型默认值全局配置
[nzData]元数据NzTreeNodeOptions[] | NzTreeNode[][]
[nzBlockNode]是否节点占据一行booleanfalse✅
[nzCheckable]节点前添加 Checkbox 复选框booleanfalse
[nzShowExpand]节点前添加展开图标booleantrue
[nzShowLine]是否展示连接线booleanfalse
[nzExpandedIcon]自定义展开图标TemplateRef<{ $implicit: NzTreeNode }>-
[nzShowIcon]是否展示 TreeNode title 前的图标，没有默认样式booleanfalse✅
[nzAsyncData]是否异步加载(显示加载状态)booleanfalse
[nzDraggable]设置节点可拖拽booleanfalse
[nzMultiple]支持点选多个节点（节点本身）booleanfalse
[nzHideUnMatched]搜索隐藏未匹配的节点booleanfalse✅
[nzCheckStrictly]checkable 状态下节点选择完全受控（父子节点选中状态不再关联）booleanfalse
[nzTreeTemplate]自定义节点TemplateRef<{ $implicit: NzTreeNode }>-
[nzExpandAll]默认展开所有树节点booleanfalse
[nzExpandedKeys]展开指定的树节点string[][]
[nzCheckedKeys]指定选中复选框的树节点string[][]
[nzSelectedKeys]指定选中的树节点string[][]
[nzSearchValue]按需筛选树高亮节点(参考可搜索的树),双向绑定stringnull
[nzSearchFunc]自定义匹配方法，配合 nzSearchValue 使用(node: NzTreeNodeOptions) => booleannull
[nzBeforeDrop]drop前二次校验,允许用户自行决定是否允许放置(confirm: NzFormatBeforeDropEvent) => Observable<boolean>-
[nzVirtualHeight]虚拟滚动的总高度string-
[nzVirtualItemSize]虚拟滚动时每一列的高度，与 cdk itemSize 相同number28
[nzVirtualMaxBufferPx]缓冲区最大像素高度，与 cdk maxBufferPx 相同number500
[nzVirtualMinBufferPx]缓冲区最小像素高度，低于该值时将加载新结构，与 cdk minBufferPx 相同number28
(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-

注意

  • 当前请确保 nzData 在其他数据相关的属性之前被初始化:
  1. // 示例
  2. this.nzExpandAll = false;
  3. const nodes = []; // 源数据
  4. this.nzData = [...nodes];
  5. // nzData 值异步获取变化后重新渲染一下属性
  6. this.nzExpandedKeys = [...this.nzExpandedKeys];
  7. // this.nzExpandAll = true;
  8. this.nzCheckedKeys = [...this.nzCheckedKeys];
  9. this.nzSelectedKeys = [...this.nzSelectedKeys];
  • NzTreeNodeOptions 可以接受用户自定义属性，可通过 NzTreeNode 的 origin 属性取得。
  • 使用 ViewChild 时，Tree 方法需要在 ngAfterViewInit 中调用。
  • nzData 属性请传递 NzTreeNodeOptions 数组。