TreeSelect树选择

树型选择控件。

何时使用#

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

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

代码演示

parent 1-0

基本

最简单的用法。

      加载中

Please select

异步数据加载

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

      加载中

Please select

虚拟滚动

设定 nzVirtualHeight 开启虚拟滚动。

      加载中

topLefttopRightbottomLeftbottomRight

Please select

位置

可以通过 nzPlacement 手动指定弹出的位置。

      加载中

Please select

多选

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

      加载中

Node1

可勾选

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

      加载中

Please select

自定义空状态

使用 nzNotFoundContent 自定义空数据状态

      加载中

Error

Warning multiple

自定义状态

使用 nzStatus 为 TreeSelect 添加状态，可选 error 或者 warning。

      加载中

API#

nz-tree-selectcomponent#

参数	说明	类型	默认值	全局配置
`[nzId]`	组件内部 input 的 id 值	`string`	-
`[nzAllowClear]`	显示清除按钮	`boolean`	`false`
`[nzPlaceHolder]`	选择框默认文字	`string`	-
`[nzPlacement]`	选择框弹出的位置	`bottomLeftbottomRighttopLefttopRight`	bottomLeft
`[nzDisabled]`	禁用选择器	`boolean`	`false`
`[nzShowIcon]`	是否展示 TreeNode title 前的图标，没有默认样式	`boolean`	`false`	✅
`[nzShowSearch]`	显示搜索框	`boolean`	`false`
`[nzNotFoundContent]`	当下拉列表为空时显示的内容	`'string' \| 'TemplateRef<void>'`	-
`[nzDropdownMatchSelectWidth]`	下拉菜单和选择器同宽	`boolean`	`true`	✅
`[nzDropdownStyle]`	下拉菜单的样式	`{ [key: string]: string; }`	-
`[nzDropdownClassName]`	下拉菜单的 className 属性	`string`	-
`[nzMultiple]`	支持多选（当设置 nzCheckable 时自动变为 true）	`boolean`	`false`
`[nzHideUnMatched]`	搜索隐藏未匹配的节点	`boolean`	`false`	✅
`[nzSize]`	选择框大小	`'large' \| 'small' \| 'default'`	`'default'`	✅
`[nzStatus]`	设置校验状态	`'error' \| 'warning'`	-
`[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[]`