• Tree树形控件
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • nz-treecomponent
        • 方法
        • NzTreeNodeOptions props
        • NzFormatEmitEvent props
        • NzFormatBeforeDropEvent props
        • NzTreeNode props
    • 注意

    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 版本取消兼容。