TreeSelect树选择

TreeSelect树选择

树型选择控件。

何时使用

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

单独引入此组件

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

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

代码演示

基本

最简单的用法。

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);
  }
}

异步数据加载

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

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

自定义图标

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

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 }
      ]
    }
  ];
}

多选

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

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

可勾选

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

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-selectcomponent

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