Tree树形控件

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

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

    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', { static: false }) 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.       title: '0-2',
    67.       key: '02',
    68.       isLeaf: true
    69.     }
    70.   ];
    72.   nzEvent(event: NzFormatEmitEvent): void {
    73.     console.log(event);
    74.   }
    76.   ngOnInit(): void {}
    77. }

    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. }

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

    2. import { NzContextMenuService, NzDropdownMenuComponent, 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 #nzTreeTemplate let-node>
    9.         <span class="custom-node" [class.active]="activedNode?.key === node.key">
    10.           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
    11.             <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
    12.             <span class="folder-name">{{ node.title }}</span>
    13.             <span class="folder-desc">created by {{ node?.origin?.author | lowercase }}</span>
    14.           </span>
    15.           <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event, menu)">
    16.             <i nz-icon nzType="file"></i>
    17.             <span class="file-name">{{ node.title }}</span>
    18.             <span class="file-desc">modified by {{ node?.origin?.author | lowercase }}</span>
    19.           </span>
    20.         </span>
    21.       </ng-template>
    22.     </nz-tree>
    23.     <nz-dropdown-menu #menu="nzDropdownMenu">
    24.       <ul nz-menu>
    25.         <li nz-menu-item (click)="selectDropdown()">Action 1</li>
    26.         <li nz-menu-item (click)="selectDropdown()">Action 2</li>
    27.       </ul>
    28.     </nz-dropdown-menu>
    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.   // actived node
    75.   activedNode: NzTreeNode;
    76.   nodes = [
    77.     {
    78.       title: 'parent 0',
    79.       key: '100',
    80.       author: 'NG ZORRO',
    81.       expanded: true,
    82.       children: [
    83.         { title: 'leaf 0-0', key: '1000', author: 'NG ZORRO', isLeaf: true },
    84.         { title: 'leaf 0-1', key: '1001', author: 'NG ZORRO', isLeaf: true }
    85.       ]
    86.     },
    87.     {
    88.       title: 'parent 1',
    89.       key: '101',
    90.       author: 'NG ZORRO',
    91.       children: [
    92.         { title: 'leaf 1-0', key: '1010', author: 'NG ZORRO', isLeaf: true },
    93.         { title: 'leaf 1-1', key: '1011', author: 'NG ZORRO', isLeaf: true }
    94.       ]
    95.     }
    97.   openFolder(data: NzTreeNode | Required<NzFormatEmitEvent>): void {
    98.     // do something if u want
    99.     if (data instanceof NzTreeNode) {
    100.       data.isExpanded = !data.isExpanded;
    101.     } else {
    102.       const node = data.node;
    103.       if (node) {
    104.         node.isExpanded = !node.isExpanded;
    105.       }
    106.     }
    107.   }
    109.   activeNode(data: NzFormatEmitEvent): void {
    110.     this.activedNode = data.node!;
    111.   }
    113.   contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    114.     this.nzContextMenuService.create($event, menu);
    115.   }
    117.   selectDropdown(): void {
    118.     // do something
    119.   }
    121.   constructor(private nzContextMenuService: NzContextMenuService) {}
    122. }

    Tree树形控件 - 图6

    受控操作示例

    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 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.         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',
    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. }

    方法

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

    NzTreeNodeOptions props

    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

    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 的 属性取得。
    • nzData 属性请传递 NzTreeNodeOptions 数组，传递 NzTreeNode 数组模式将在 8.x 版本取消兼容。