TreeSelect树选择

树型选择控件。

何时使用#

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

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

代码演示

parent 1-0

基本

最简单的用法。

加载中

Please select

异步数据加载

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

加载中

Please select

自定义图标

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

加载中

[object Object]

Please select

多选

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

加载中

Node1

[object Object]

可勾选

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

加载中

Please select

虚拟滚动

设定 nzVirtualHeight 开启虚拟滚动。

加载中

API#

nz-tree-selectcomponent#

参数	说明	类型	默认值	全局配置
`[nzId]`	组件内部 input 的 id 值	`string`	-
`[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; }`	-
`[nzDropdownClassName]`	下拉菜单的 className 属性	`string`	-
`[nzMultiple]`	支持多选（当设置 nzCheckable 时自动变为true）	`boolean`	`false`
`[nzHideUnMatched]`	搜索隐藏未匹配的节点	`boolean`	`false`	✅
`[nzSize]`	选择框大小	`'large' \| 'small' \| 'default'`	`'default'`	✅
`[nzCheckable]`	节点前添加 Checkbox 复选框	`boolean`	`false`
`[nzCheckStrictly]`	checkable 状态下节点选择完全受控（父子节点选中状态不再关联）	`boolean`	`false`
`[nzShowExpand]`	节点前添加展开图标	`boolean`	`true`
`[nzShowLine]`	是否展示连接线	`boolean`	`false`
`[nzAsyncData]`	是否异步加载(显示加载状态)	`boolean`	`false`
`[nzNodes]`	treeNodes 数据	`NzTreeNodeOptions[]`	`[]`
`[nzDefaultExpandAll]`	默认展开所有树节点	`boolean`	`false`
`[nzExpandedKeys]`	默认展开指定的树节点	`string[]`	-
`[nzDisplayWith]`	如何在输入框显示所选的节点值的方法	`(node: NzTreeNode) => string`	`(node: NzTreeNode) => node.title`
`[nzMaxTagCount]`	最多显示多少个 tag	number	-
`[nzMaxTagPlaceholder]`	隐藏 tag 时显示的内容	TemplateRef<{ $implicit: NzTreeNode[] }>	-
`[nzTreeTemplate]`	自定义节点	`TemplateRef<{ $implicit: NzTreeNode }>`	-
`[nzVirtualHeight]`	虚拟滚动的总高度	`string`	`-`
`[nzVirtualItemSize]`	虚拟滚动时每一列的高度，与 cdk itemSize 相同	`number`	`28`
`[nzVirtualMaxBufferPx]`	缓冲区最大像素高度，与 cdk maxBufferPx 相同	`number`	`500`
`[nzVirtualMinBufferPx]`	缓冲区最小像素高度，低于该值时将加载新结构，与 cdk minBufferPx 相同	`number`	`28`
`[nzBackdrop]`	浮层是否应带有背景板	`boolean`	`false`
`(nzExpandChange)`	点击展开树节点图标调用	`EventEmitter<NzFormatEmitEvent>`	-

方法#

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