TreeSelect
树选择

树型选择控件。
使用

何时使用#

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

代码演示#

parent 1-0

最简单的用法。

      加载中
    
Please select

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

      加载中
    
Please select

设定 nzVirtualHeight 开启虚拟滚动。

      加载中
    


Please select

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

      加载中
    
parent 1
parent 1
parent 1
parent 1
parent 1
parent 1
parent 1
parent 1

TreeSelect 形态变体,可选 outlined、filled、borderless、underlined 四种形态。

      加载中
    
20.0.0
Please select

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

      加载中
    
Node1

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

      加载中
    
Please select

使用 nzNotFoundContent 自定义空数据状态

      加载中
    
Error


Warning multiple

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

      加载中
    


Prefix

自定义前缀 nzPrefix 和后缀图标 nzSuffixIcon。

      加载中
    

API#

nz-tree-select#

参数说明类型默认值全局配置版本
[nzId]组件内部 input 的 id 值string-
[nzOpen]下拉菜单是否打开,可双向绑定booleanfalse
[nzAllowClear]显示清除按钮booleanfalse
[nzPlaceHolder]选择框默认文字string-
[nzPlacement]选择框弹出的位置'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight''bottomLeft'
[nzDisabled]禁用选择器booleanfalse
[nzShowIcon]是否展示 TreeNode title 前的图标,没有默认样式booleanfalse✅
[nzShowSearch]显示搜索框booleanfalse
[nzNotFoundContent]当下拉列表为空时显示的内容'string' | 'TemplateRef<void>'-
[nzDropdownMatchSelectWidth]下拉菜单和选择器同宽booleantrue✅
[nzDropdownStyle]下拉菜单的样式{ [key: string]: string; }-
[nzDropdownClassName]下拉菜单的 className 属性string-
[nzMultiple]支持多选(当设置 nzCheckable 时自动变为 true)booleanfalse
[nzHideUnMatched]搜索隐藏未匹配的节点booleanfalse✅
[nzSize]选择框大小'large' | 'small' | 'default''default'✅
[nzStatus]设置校验状态'error' | 'warning'-
[nzCheckable]节点前添加 Checkbox 复选框booleanfalse
[nzCheckStrictly]checkable 状态下节点选择完全受控(父子节点选中状态不再关联)booleanfalse
[nzShowExpand]节点前添加展开图标booleantrue
[nzShowLine]是否展示连接线booleanfalse
[nzPrefix]自定义的选择框前缀TemplateRef<any> | string-
[nzSuffixIcon]自定义的选择框后缀图标TemplateRef<any> | string-
[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 }>-
[nzVariant]形态变体'outlined' | 'borderless' | 'filled' | 'underlined''outlined'✅20.0.0
[nzVirtualHeight]虚拟滚动的总高度string-
[nzVirtualItemSize]虚拟滚动时每列的高度,与 cdk itemSize 相同number28
[nzVirtualMaxBufferPx]缓冲区最大像素高度,与 cdk maxBufferPx 相同number500
[nzVirtualMinBufferPx]缓冲区最小像素高度,与 cdk minBufferPx 相同number28
[nzBackdrop]浮层是否应带有背景板booleanfalse
(nzExpandChange)点击展开树节点图标调用EventEmitter<NzFormatEmitEvent>-
(nzOpenChange)下拉菜单打开状态变化回调EventEmitter<boolean>-

方法#

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

FAQ#

Q:滚动时浮层元素没有跟随滚动位置#

默认情况下,浮层元素使用 body 作为滚动容器,如果使用了其他滚动容器,在自定义滚动容器元素上添加 CdkScrollable 指令。 注意:您需要从 @angular/cdk/scrolling 导入 CdkScrollable 指令或 ScrollingModule 模块。