TreeSelect树选择

树型选择控件。

何时使用#

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

单独引入此组件#

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

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

代码演示

parent 1-0

最简单的用法。

expand codeexpand code
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-tree-select-basic',
  template: `
    <nz-tree-select
      style="width: 250px"
      [nzDefaultExpandedKeys]="expandKeys"
      [nzNodes]="nodes"
      nzShowSearch
      nzPlaceHolder="Please select"
      [(ngModel)]="value"
      (ngModelChange)="onChange($event)"
    >
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectBasicComponent implements OnInit {
  expandKeys = ['100', '1001'];
  value: string;
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      children: [
        {
          title: 'parent 1-0',
          key: '1001',
          children: [
            { title: 'leaf 1-0-0', key: '10010', isLeaf: true },
            { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
          ]
        },
        {
          title: 'parent 1-1',
          key: '1002',
          children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }]
        }
      ]
    }
  ];

  onChange($event: string): void {
    console.log($event);
  }

  ngOnInit(): void {
    // mock async
    setTimeout(() => {
      this.value = '1001';
    }, 1000);
  }
}
Please select

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

expand codeexpand code
import { Component, OnInit } from '@angular/core';
import { NzFormatEmitEvent } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-tree-select-async',
  template: `
    <nz-tree-select
      style="width: 250px"
      nzPlaceHolder="Please select"
      [nzDefaultExpandedKeys]="expandKeys"
      [nzDropdownMatchSelectWidth]="true"
      [nzDropdownStyle]="{ 'max-height': '300px' }"
      [(ngModel)]="value"
      [nzNodes]="nodes"
      [nzAsyncData]="true"
      (nzExpandChange)="onExpandChange($event)"
    >
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectAsyncComponent implements OnInit {
  expandKeys = ['0-0'];
  value: string;
  nodes = [
    {
      title: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [
        {
          title: 'Child Node1',
          value: '0-0-1',
          key: '0-0-1'
        },
        {
          title: 'Child Node2',
          value: '0-0-2',
          key: '0-0-2'
        }
      ]
    },
    {
      title: 'Node2',
      value: '0-1',
      key: '0-1'
    }
  ];

  onExpandChange(e: Required<NzFormatEmitEvent>): void {
    const node = e.node;
    if (node && node.getChildren().length === 0 && node.isExpanded) {
      this.loadNode().then(data => {
        node.addChildren(data);
      });
    }
  }

  loadNode(): Promise<any[]> {
    return new Promise(resolve => {
      setTimeout(
        () =>
          resolve([
            { title: 'Child Node', key: `${new Date().getTime()}-0` },
            { title: 'Child Node', key: `${new Date().getTime()}-1` }
          ]),
        1000
      );
    });
  }

  ngOnInit(): void {}
}
Please select

Please select

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-tree-select-customized-icon',
  template: `
    <nz-tree-select style="width: 250px" [nzNodes]="nodes" [(ngModel)]="value" nzPlaceHolder="Please select" nzShowIcon>
    </nz-tree-select>
    <br />
    <nz-tree-select
      style="width: 250px; margin-top: 20px;"
      [nzNodes]="nodes"
      [(ngModel)]="value"
      nzPlaceHolder="Please select"
    >
      <ng-template #nzTreeTemplate let-node>
        <span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
          <span> <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i> {{ node.title }} </span>
        </span>
      </ng-template>
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectCustomizedIconComponent {
  value: string;
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      expanded: true,
      icon: 'anticon anticon-smile-o',
      children: [
        { title: 'leaf 1-0-0', key: '10010', icon: 'anticon anticon-meh-o', isLeaf: true },
        { title: 'leaf 1-0-1', key: '10011', icon: 'anticon anticon-frown-o', isLeaf: true }
      ]
    }
  ];
}
    Please select

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

expand codeexpand code
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-tree-select-multiple',
  template: `
    <nz-tree-select
      style="width: 250px"
      nzPlaceHolder="Please select"
      [nzMaxTagCount]="3"
      [nzMaxTagPlaceholder]="omittedPlaceHolder"
      [nzNodes]="nodes"
      [nzDefaultExpandAll]="true"
      [nzAllowClear]="false"
      [(ngModel)]="value"
      [nzMultiple]="true"
      (ngModelChange)="onChange($event)"
    >
    </nz-tree-select>
    <ng-template #omittedPlaceHolder let-omittedValues> and {{ omittedValues.length }} more... </ng-template>
  `
})
export class NzDemoTreeSelectMultipleComponent implements OnInit {
  value: string[] = [];
  nodes = [
    {
      title: 'parent 1',
      key: '100',
      children: [
        {
          title: 'parent 1-0',
          key: '1001',
          children: [
            { title: 'leaf 1-0-0', key: '10010', isLeaf: true },
            { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
          ]
        },
        {
          title: 'parent 1-1',
          key: '1002',
          children: [{ title: 'leaf 1-1-0', key: '10020', isLeaf: true }]
        }
      ]
    }
  ];

  onChange($event: string[]): void {
    console.log($event);
  }

  ngOnInit(): void {}
}
  • Node1

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

expand codeexpand code
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-tree-select-checkable',
  template: `
    <nz-tree-select
      style="width: 250px"
      [nzNodes]="nodes"
      nzShowSearch
      nzCheckable
      nzPlaceHolder="Please select"
      [(ngModel)]="value"
      (ngModelChange)="onChange($event)"
    >
    </nz-tree-select>
  `
})
export class NzDemoTreeSelectCheckableComponent implements OnInit {
  value: string[] = ['0-0-0'];
  nodes = [
    {
      title: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [
        {
          title: 'Child Node1',
          value: '0-0-0',
          key: '0-0-0',
          isLeaf: true
        }
      ]
    },
    {
      title: 'Node2',
      value: '0-1',
      key: '0-1',
      children: [
        {
          title: 'Child Node3',
          value: '0-1-0',
          key: '0-1-0',
          isLeaf: true
        },
        {
          title: 'Child Node4',
          value: '0-1-1',
          key: '0-1-1',
          isLeaf: true
        },
        {
          title: 'Child Node5',
          value: '0-1-2',
          key: '0-1-2',
          isLeaf: true
        }
      ]
    }
  ];

  onChange($event: string[]): void {
    console.log($event);
  }

  ngOnInit(): void {}
}

API#

nz-tree-select#

参数说明类型默认值
[nzAllowClear]显示清除按钮booleanfalse
[nzPlaceHolder]选择框默认文字string-
[nzDisabled]禁用选择器booleanfalse
[nzShowIcon]是否展示 TreeNode title 前的图标,没有默认样式booleanfalse
[nzShowSearch]显示搜索框booleanfalse
[nzNotFoundContent]当下拉列表为空时显示的内容string-
[nzDropdownMatchSelectWidth]下拉菜单和选择器同宽booleantrue
[nzDropdownStyle]下拉菜单的样式{ [key: string]: string; }-
[nzMultiple]支持多选(当设置 nzCheckable 时自动变为true)booleanfalse
[nzHideUnMatched]搜索隐藏未匹配的节点booleanfalse
[nzSize]选择框大小'large' | 'small' | 'default''default'
[nzCheckable]节点前添加 Checkbox 复选框booleanfalse
[nzShowExpand]节点前添加展开图标booleantrue
[nzShowLine]是否展示连接线booleanfalse
[nzAsyncData]是否异步加载(显示加载状态)booleanfalse
[nzNodes]treeNodes 数据NzTreeNodeOptions[][]
[nzDefaultExpandAll]默认展开所有树节点booleanfalse
[nzDefaultExpandedKeys]默认展开指定的树节点string[]-
[nzDisplayWith]如何在输入框显示所选的节点值的方法(node: NzTreeNode) => string(node: NzTreeNode) => node.title
[nzMaxTagCount]最多显示多少个 tagnumber-
[nzMaxTagPlaceholder]隐藏 tag 时显示的内容TemplateRef<{ $implicit: NzTreeNode[] }>-
(nzExpandChange)点击展开树节点图标调用EventEmitter<NzFormatEmitEvent>-

方法#

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