树形组件

IW

⌘ K

IW

⌘ K

‌
‌
‌
‌

使用场景

代码演示

API

参数	说明	类型	默认值
data	数据源	Array<{labe:string,value:string,children:[]}>	-
onChange	点击选中节点时的回调	(checkNode, currentTree) => void	-
selected	设置节点的选中状态。如果父节点被选中，子节点部分选中，则子节点的选中设置无效，子节点会被全部选择	-	-
expand	设置展开的节点

treeNode 节点

对节点的操作有选中、展开、禁用。有两种方式来设置，一种是直接在 treeData 的每个节点进行设置，但此时要保证子节点和父节点都设置正确。例如设置自己点为全选，父节点并不会自动设置选择；第二种方式是，通过 tree 的属性来设置

参数	说明	类型	默认值
expand	节点是否默认展开	boolean	false
label	节点展示标签	string	-
value	节点值	string	-
id	节点 id	-	默认是 label 的值
check	节点选中类型	0: 未选择，1：全选，2 表示半选	-

实现原理

结合树的深度优先遍历算法和 HashMap 存储来实现。当改变当前节点的状态时，在 hashMap 中找到当前节点。

深度优先遍历子孙节点，修改相应的状态。
获取当前节点的最高层父节点。然后再通过深度优先遍历，根据子节点的状态，设置父节点状态。如所有子节点的状态都为选中状态，则父节点的选中状态为全选；如果子节点有“全选”和“没有选中”两中状态，则父节点状态设置为半选。

‌
‌
‌
‌

使用场景

代码演示

API

参数	说明	类型	默认值
data	数据源	Array<{labe:string,value:string,children:[]}>	-
onChange	点击选中节点时的回调	(checkNode, currentTree) => void	-
selected	设置节点的选中状态。如果父节点被选中，子节点部分选中，则子节点的选中设置无效，子节点会被全部选择	-	-
expand	设置展开的节点

treeNode 节点

对节点的操作有选中、展开、禁用。有两种方式来设置，一种是直接在 treeData 的每个节点进行设置，但此时要保证子节点和父节点都设置正确。例如设置自己点为全选，父节点并不会自动设置选择；第二种方式是，通过 tree 的属性来设置

参数	说明	类型	默认值
expand	节点是否默认展开	boolean	false
label	节点展示标签	string	-
value	节点值	string	-
id	节点 id	-	默认是 label 的值
check	节点选中类型	0: 未选择，1：全选，2 表示半选	-

实现原理

结合树的深度优先遍历算法和 HashMap 存储来实现。当改变当前节点的状态时，在 hashMap 中找到当前节点。

深度优先遍历子孙节点，修改相应的状态。
获取当前节点的最高层父节点。然后再通过深度优先遍历，根据子节点的状态，设置父节点状态。如所有子节点的状态都为选中状态，则父节点的选中状态为全选；如果子节点有“全选”和“没有选中”两中状态，则父节点状态设置为半选。

Child 1-1

Grandchild 1-1-1

Grandchild 1-1-2

Child 1-2

Parent 2

Child 2-1

Child 2-2

Parent 1

Child 1-1

Child 1-2

Parent 2

Child 2-1

Child 2-2

Parent 1

Child 1-1

Child 1-2

Parent 2

Child 2-1

Child 2-2

Parent 1

Child 1-1

Child 1-2

Parent 2

Child 2-1

Child 2-2

使用场景

代码演示

API

treeNode 节点

实现原理

使用场景

代码演示

API

treeNode 节点

实现原理

基础使用

展开节点

设置默认选择

设置不可选中的节点