TreeSelect树选择

树型选择控件。

何时使用#

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

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

代码演示

parent 1-0

最简单的用法。

expand codeexpand code
      加载中
    
Please select

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

expand codeexpand code
      加载中
    
Please select

设定 nzVirtualHeight 开启虚拟滚动。

expand codeexpand code
      加载中
    
  Please select

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

expand codeexpand code
      加载中
    
  Please select

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

expand codeexpand code
      加载中
    
Node1
 

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

expand codeexpand code
      加载中
    
Please select

使用 nzNotFoundContent 自定义空数据状态

expand codeexpand code
      加载中
    
Error
  Warning multiple

使用 nzStatusTreeSelect 添加状态,可选 error 或者 warning

expand codeexpand code
      加载中
    

API#

nz-tree-select#

参数说明类型默认值全局配置
[nzId]组件内部 input 的 id 值string-
[nzAllowClear]显示清除按钮booleanfalse
[nzPlaceHolder]选择框默认文字string-
[nzPlacement]选择框弹出的位置bottomLeftbottomRighttopLefttopRightbottomLeft
[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
[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 }>-
[nzVirtualHeight]虚拟滚动的总高度string-
[nzVirtualItemSize]虚拟滚动时每一列的高度,与 cdk itemSize 相同number28
[nzVirtualMaxBufferPx]缓冲区最大像素高度,与 cdk maxBufferPx 相同number500
[nzVirtualMinBufferPx]缓冲区最小像素高度,低于该值时将加载新结构,与 cdk minBufferPx 相同number28
[nzBackdrop]浮层是否应带有背景板booleanfalse
(nzExpandChange)点击展开树节点图标调用EventEmitter<NzFormatEmitEvent>-

方法#

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