TreeSelect树选择

树型选择控件。

何时使用

类似 Select 的选择控件,可选择的数据结构是一个树形结构时,可以使用 TreeSelect,例如公司层级、学科系统、分类目录等等。

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

代码演示TreeSelect树选择 - 图2

TreeSelect树选择 - 图3

基本

最简单的用法。

  1. import { Component, OnInit } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tree-select-basic',
  4. template: `
  5. <nz-tree-select
  6. style="width: 250px"
  7. [nzExpandedKeys]="expandKeys"
  8. [nzNodes]="nodes"
  9. nzShowSearch
  10. nzPlaceHolder="Please select"
  11. [(ngModel)]="value"
  12. (ngModelChange)="onChange($event)"
  13. >
  14. </nz-tree-select>
  15. `
  16. })
  17. export class NzDemoTreeSelectBasicComponent implements OnInit {
  18. expandKeys = ['100', '1001'];
  19. value?: string;
  20. nodes = [
  21. {
  22. title: 'parent 1',
  23. key: '100',
  24. children: [
  25. {
  26. title: 'parent 1-0',
  27. key: '1001',
  28. children: [
  29. { title: 'leaf 1-0-0', key: '10010', isLeaf: true },
  30. { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
  31. ]
  32. },
  33. {
  34. title: 'parent 1-1',
  35. key: '1002',
  36. children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }]
  37. }
  38. ]
  39. }
  40. ];
  41. onChange($event: string): void {
  42. console.log($event);
  43. }
  44. ngOnInit(): void {
  45. // mock async
  46. setTimeout(() => {
  47. this.value = '1001';
  48. }, 1000);
  49. }
  50. }

TreeSelect树选择 - 图4

异步数据加载

点击展开节点,动态加载数据,直到执行 addChildren() 方法取消加载状态。

  1. import { Component } from '@angular/core';
  2. import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
  3. @Component({
  4. selector: 'nz-demo-tree-select-async',
  5. template: `
  6. <nz-tree-select
  7. style="width: 250px"
  8. nzPlaceHolder="Please select"
  9. [nzExpandedKeys]="expandKeys"
  10. [(ngModel)]="value"
  11. [nzDropdownMatchSelectWidth]="true"
  12. [nzDropdownStyle]="{ 'max-height': '300px' }"
  13. [nzNodes]="nodes"
  14. [nzAsyncData]="true"
  15. (nzExpandChange)="onExpandChange($event)"
  16. >
  17. </nz-tree-select>
  18. `
  19. })
  20. export class NzDemoTreeSelectAsyncComponent {
  21. expandKeys = ['0-0'];
  22. value?: string;
  23. nodes = [
  24. {
  25. title: 'Node1',
  26. value: '0-0',
  27. key: '0-0',
  28. children: [
  29. {
  30. title: 'Child Node1',
  31. value: '0-0-1',
  32. key: '0-0-1'
  33. },
  34. {
  35. title: 'Child Node2',
  36. value: '0-0-2',
  37. key: '0-0-2'
  38. }
  39. ]
  40. },
  41. {
  42. title: 'Node2',
  43. value: '0-1',
  44. key: '0-1'
  45. }
  46. ];
  47. onExpandChange(e: NzFormatEmitEvent): void {
  48. const node = e.node;
  49. if (node && node.getChildren().length === 0 && node.isExpanded) {
  50. this.loadNode().then(data => {
  51. node.addChildren(data);
  52. });
  53. }
  54. }
  55. loadNode(): Promise<NzTreeNodeOptions[]> {
  56. return new Promise(resolve => {
  57. setTimeout(
  58. () =>
  59. resolve([
  60. { title: 'Child Node', key: `${new Date().getTime()}-0` },
  61. { title: 'Child Node', key: `${new Date().getTime()}-1` }
  62. ]),
  63. 1000
  64. );
  65. });
  66. }
  67. }

TreeSelect树选择 - 图5

自定义图标

可以针对不同节点采用样式覆盖的方式定制图标。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tree-select-customized-icon',
  4. template: `
  5. <nz-tree-select style="width: 250px" [(ngModel)]="value" [nzNodes]="nodes" nzPlaceHolder="Please select" nzShowIcon> </nz-tree-select>
  6. <br />
  7. <nz-tree-select style="width: 250px; margin-top: 20px;" [(ngModel)]="value" [nzNodes]="nodes" nzPlaceHolder="Please select">
  8. <ng-template #nzTreeTemplate let-node>
  9. <span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
  10. <span> <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i> {{ node.title }} </span>
  11. </span>
  12. </ng-template>
  13. </nz-tree-select>
  14. `
  15. })
  16. export class NzDemoTreeSelectCustomizedIconComponent {
  17. value?: string;
  18. nodes = [
  19. {
  20. title: 'parent 1',
  21. key: '100',
  22. expanded: true,
  23. icon: 'smile',
  24. children: [
  25. { title: 'leaf 1-0-0', key: '10010', icon: 'meh', isLeaf: true },
  26. { title: 'leaf 1-0-1', key: '10011', icon: 'frown', isLeaf: true }
  27. ]
  28. }
  29. ];
  30. }

TreeSelect树选择 - 图6

多选

多选的树选择,例子中通过 nzMaxTagCount 限制最多显示3个选项。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tree-select-multiple',
  4. template: `
  5. <nz-tree-select
  6. style="width: 250px"
  7. nzPlaceHolder="Please select"
  8. [(ngModel)]="value"
  9. [nzMaxTagCount]="3"
  10. [nzMaxTagPlaceholder]="omittedPlaceHolder"
  11. [nzNodes]="nodes"
  12. [nzDefaultExpandAll]="true"
  13. [nzAllowClear]="false"
  14. [nzMultiple]="true"
  15. (ngModelChange)="onChange($event)"
  16. >
  17. </nz-tree-select>
  18. <ng-template #omittedPlaceHolder let-omittedValues> and {{ omittedValues.length }} more... </ng-template>
  19. `
  20. })
  21. export class NzDemoTreeSelectMultipleComponent {
  22. value: string[] = [];
  23. nodes = [
  24. {
  25. title: 'parent 1',
  26. key: '100',
  27. children: [
  28. {
  29. title: 'parent 1-0',
  30. key: '1001',
  31. children: [
  32. { title: 'leaf 1-0-0', key: '10010', isLeaf: true },
  33. { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
  34. ]
  35. },
  36. {
  37. title: 'parent 1-1',
  38. key: '1002',
  39. children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }]
  40. }
  41. ]
  42. }
  43. ];
  44. onChange($event: string[]): void {
  45. console.log($event);
  46. }
  47. }

TreeSelect树选择 - 图7

可勾选

使用勾选框实现多选功能。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-tree-select-checkable',
  4. template: `
  5. <nz-tree-select
  6. style="width: 250px"
  7. [(ngModel)]="value"
  8. [nzNodes]="nodes"
  9. (ngModelChange)="onChange($event)"
  10. nzShowSearch
  11. nzCheckable
  12. nzPlaceHolder="Please select"
  13. >
  14. </nz-tree-select>
  15. `
  16. })
  17. export class NzDemoTreeSelectCheckableComponent {
  18. value: string[] = ['0-0-0'];
  19. nodes = [
  20. {
  21. title: 'Node1',
  22. value: '0-0',
  23. key: '0-0',
  24. children: [
  25. {
  26. title: 'Child Node1',
  27. value: '0-0-0',
  28. key: '0-0-0',
  29. isLeaf: true
  30. }
  31. ]
  32. },
  33. {
  34. title: 'Node2',
  35. value: '0-1',
  36. key: '0-1',
  37. children: [
  38. {
  39. title: 'Child Node3',
  40. value: '0-1-0',
  41. key: '0-1-0',
  42. isLeaf: true
  43. },
  44. {
  45. title: 'Child Node4',
  46. value: '0-1-1',
  47. key: '0-1-1',
  48. isLeaf: true
  49. },
  50. {
  51. title: 'Child Node5',
  52. value: '0-1-2',
  53. key: '0-1-2',
  54. isLeaf: true
  55. }
  56. ]
  57. }
  58. ];
  59. onChange($event: string[]): void {
  60. console.log($event);
  61. }
  62. }

TreeSelect树选择 - 图8

虚拟滚动

设定 nzVirtualHeight 开启虚拟滚动。

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

API

nz-tree-selectcomponent

参数说明类型默认值全局配置
[nzAllowClear]显示清除按钮booleanfalse
[nzPlaceHolder]选择框默认文字string-
[nzDisabled]禁用选择器booleanfalse
[nzShowIcon]是否展示 TreeNode title 前的图标,没有默认样式booleanfalse
[nzShowSearch]显示搜索框booleanfalse
[nzNotFoundContent]当下拉列表为空时显示的内容string-
[nzDropdownMatchSelectWidth]下拉菜单和选择器同宽booleantrue
[nzDropdownStyle]下拉菜单的样式{ [key: string]: string; }-
[nzDropdownClassName]下拉菜单的 className 属性string-
[nzMultiple]支持多选(当设置 nzCheckable 时自动变为true)booleanfalse
[nzHideUnMatched]搜索隐藏未匹配的节点booleanfalse
[nzSize]选择框大小‘large’ | ‘small’ | ‘default’‘default’
[nzCheckable]节点前添加 Checkbox 复选框booleanfalse
[nzCheckStrictly]checkable 状态下节点选择完全受控(父子节点选中状态不再关联)booleanfalse
[nzShowExpand]节点前添加展开图标booleantrue
[nzShowLine]是否展示连接线booleanfalse
[nzAsyncData]是否异步加载(显示加载状态)booleanfalse
[nzNodes]treeNodes 数据NzTreeNodeOptions[][]
[nzDefaultExpandAll]默认展开所有树节点booleanfalse
[nzExpandedKeys]默认展开指定的树节点string[]-
[nzDisplayWith]如何在输入框显示所选的节点值的方法(node: NzTreeNode) => string(node: NzTreeNode) => node.title
[nzMaxTagCount]最多显示多少个 tagnumber-
[nzMaxTagPlaceholder]隐藏 tag 时显示的内容TemplateRef<{ $implicit: NzTreeNode[] }>-
[nzTreeTemplate]自定义节点TemplateRef<{ $implicit: NzTreeNode }>-
[nzVirtualHeight]虚拟滚动的总高度string-
[nzVirtualItemSize]虚拟滚动时每一列的高度,与 cdk itemSize 相同number28
[nzVirtualMaxBufferPx]缓冲区最大像素高度,与 cdk maxBufferPx 相同number500
[nzVirtualMinBufferPx]缓冲区最小像素高度,低于该值时将加载新结构,与 cdk minBufferPx 相同number28
(nzExpandChange)点击展开树节点图标调用EventEmitter<NzFormatEmitEvent>-

方法

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