Tree树形控件
何时使用#
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
代码演示
-
root1
-
child1
- child1.1
- child1.2
- child2
-
child1
- root2
- root3
基本
最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
- root1
-
root2
- child2.1
-
child2.2
- grandchild2.2.1
- root3
连接线
带连接线的树。
- root1
- root2
- 可搜索
可搜索的树。
- root1
- root2
- root3
拖动示例
将节点拖拽到其他节点内部或前后。
- root1
- root2
- root3
自定义图标
可以针对不同节点采用样式覆盖的方式定制图标，双击展开。
- root1
- root2
- root3
异步数据加载
点击展开节点，动态加载数据，直到执行 addChildren() 方法取消加载状态。
API#
Tree props#
| 参数 | 说明 | 类型 | 默认值 | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| nzTreeData | 元数据,单个节点结构参考NzTreeNode | array | [] | |||||||||||||||||
| nzCheckable | 节点前添加 CheckBox 复选框 | boolean | false | |||||||||||||||||
| nzShowExpand | 节点前添加展开图标 | true | ||||||||||||||||||
| nzShowLine | 是否展示连接线 | nzAsyncData | 是否异步加载(显示加载状态) | nzDraggable | 设置节点可拖拽（IE>8） | nzMultiple | 支持点选多个节点（节点本身） | nzDefaultExpandAll | 默认展开所有树节点 | nzDefaultExpandedKeys | 默认展开指定的树节点 | string[] | nzDefaultCheckedKeys | 默认选中复选框的树节点 | nzDefaultSelectedKeys | 默认选中的树节点(nzMultiple为true) | nzSearchValue | 按需筛选树高亮节点(结合搜索控件) | string | null |
| nzClick | 点击树节点触发 | EventEmitter<NzFormatEmitEvent> | - | |||||||||||||||||
| nzDblClick | 双击树节点触发 | nzContextMenu | 右键树节点触发 | nzCheckBoxChange | 点击树节点 CheckBox 触发 | nzExpandChange | 点击展开树节点图标触发 | nzOnDragStart | 开始拖拽时调用 | nzOndragenter | dragenter 触发时调用 | nzOnDragOver | dragover 触发时调用 | nzOnDragLeave | dragleave 触发时调用 | nzOnDrop | drop 触发时调用 | nzOnDragEnd | dragend 触发时调用 | - |
NzTreeNodeOptions propstitle
标题
'---'
key
整个树范围内的所有节点的 key 值不能重复且不为空！
children
子节点
array<NzTreeNodeOptions>
isLeaf
设置为叶子节点(叶子节点不可被拖拽模式放置)
checked
设置节点 CheckBox 是否选中
selected
设置节点本身是否选中
expanded
设置节点是否展开(叶子节点无效)
selectable
设置节点是否可被选中
disabled
设置是否禁用节点(不可进行任何操作)
disableCheckBox
设置节点禁用 CheckBox
false
NzFormatEmitEvent propseventName
事件名
enum:clickdblclickcontextmenucheckexpand&dragstartdragenterdragoverdragleavedropdragend
''
node
当前操作节点(拖拽时表示目标节点)
NzTreeNode
event
原生事件
MouseEventDragEvent
dragNode?
当前拖拽节点(拖拽时存在)
selectedKeys?
已选中的节点(单击时存在)
array<NzTreeNode>
checkedKeys?
checkBox 已选中的节点(点击 checkBox 存在)
[]
NzTreeNode props方法
返回值类型
NzTreeNodeOptions.title
key值
NzTreeNodeOptions.key
level
层级(最顶层为0,子节点逐层加1)
number
number
array<NzTreeNode>
treeOptions
原始节点树结构
NzTreeNodeOptions
NzTreeNodeOptions
getParentNode
获取父节点
function
NzTreeNode或null
是否为叶子节点
true或false
isExpanded
是否已展开
isdisabled
是否禁用
isdisableCheckBox
是否禁用 checkBox
isSelectable
是否可选中
isChecked
是否选中 checkBox
isAllChecked
子节点是否全选
isHalfChecked
子节点有选中但未全选
isSelected
是否已选中
isLoading
是否异步加载状态(影响展开图标展示)
isMatched
title是否包含nzSearchValue(搜索使用)
getChildren
获取子节点,返回NzTreeNode数组
NzTreeNode[]
addChildren
添加子节点,接收NzTreeNode或NzTreeNodeOptions数组,第二个参数为插入的索引位置
(children: array,index?: number )=>{}
void
clearChildren
清除子节点
void
注意#
clickdblclickcontextmenucheckexpand&dragstartdragenterdragoverdragleavedropdragend
DragEvent
NzTreeNode props方法
返回值类型
NzTreeNodeOptions.title
key值
NzTreeNodeOptions.key
level
层级(最顶层为0,子节点逐层加1)
number
number
array<NzTreeNode>
treeOptions
原始节点树结构
NzTreeNodeOptions
NzTreeNodeOptions
getParentNode
获取父节点
function
NzTreeNode或null
是否为叶子节点
true或false
isExpanded
是否已展开
isdisabled
是否禁用
isdisableCheckBox
是否禁用 checkBox
isSelectable
是否可选中
isChecked
是否选中 checkBox
isAllChecked
子节点是否全选
isHalfChecked
子节点有选中但未全选
isSelected
是否已选中
isLoading
是否异步加载状态(影响展开图标展示)
isMatched
title是否包含nzSearchValue(搜索使用)
getChildren
获取子节点,返回NzTreeNode数组
NzTreeNode[]
addChildren
添加子节点,接收NzTreeNode或NzTreeNodeOptions数组,第二个参数为插入的索引位置
(children: array,index?: number )=>{}
void
clearChildren
清除子节点
void
注意#
NzTreeNode或null
false
nzDefaultExpandedKeys、nzDefaultCheckedKeys初始化时将不关联子节点!
地址：https://ng.ant.design/version/0.7.x/components/tree/zh