Tree树形控件

何时使用

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

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

代码演示

Tree树形控件 - 图1

基本

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

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

Tree树形控件 - 图2

拖动示例

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

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

Tree树形控件 - 图3

异步数据加载

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

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

Tree树形控件 - 图4

连接线

带连接线的树。

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

Tree树形控件 - 图5

目录

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

Tree树形控件 - 图6

受控操作示例

受控操作示例(默认)。

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

Tree树形控件 - 图7

拖动示例-二次校验

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';
  5. @Component({
  6. selector: 'nz-demo-tree-draggable-confirm',
  7. template: ` <nz-tree [nzData]="nodes" nzDraggable nzBlockNode [nzBeforeDrop]="beforeDrop"> </nz-tree> `
  8. })
  9. export class NzDemoTreeDraggableConfirmComponent {
  10. nodes = [
  11. {
  12. title: '0-0',
  13. key: '100',
  14. expanded: true,
  15. children: [
  16. {
  17. title: '0-0-0',
  18. key: '1001',
  19. children: [
  20. { title: '0-0-0-0', key: '10010', isLeaf: true },
  21. { title: '0-0-0-1', key: '10011', isLeaf: true }
  22. ]
  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. ];
  32. beforeDrop(arg: NzFormatBeforeDropEvent): Observable<boolean> {
  33. // if insert node into another node, wait 1s
  34. if (arg.pos === 0) {
  35. return of(true).pipe(delay(1000));
  36. } else {
  37. return of(false);
  38. }
  39. }
  40. }

Tree树形控件 - 图8

可搜索

可搜索的树。

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

Tree树形控件 - 图9

自定义图标

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

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

Tree树形控件 - 图10

虚拟滚动

设定 nzVirtualHeight 开启虚拟滚动。

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

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 相同number0
[nzVirtualMaxBufferPx]缓冲区最大像素高度,与 cdk maxBufferPx 相同number200
[nzVirtualMinBufferPx]缓冲区最小像素高度,低于该值时将加载新结构,与 cdk minBufferPx 相同number100
(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 可以接受用户自定义属性,可通过 NzTreeNodeorigin 属性取得。
  • 使用 ViewChild 时,Tree 方法需要在 ngAfterViewInit 中调用。
  • nzData 属性请传递 NzTreeNodeOptions 数组。