Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示。

可选择 (Checkbox)

适用于需要选择层级数据的场景。

连接线 (Connection Lines)

特色功能：开启 show-line 属性后，会显示连接线辅助浏览。

自定义图标

可以自定义展开/折叠图标，甚至可以根据节点状态显示不同图标。

自定义节点内容

使用 default 插槽自定义节点内容。

API

Tree Attributes

属性名	说明	类型	默认值
data	展示数据	array	[]
empty-text	内容为空的时候展示的文本	string	-
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	string	id
props	配置选项，具体看下表	object	-
show-checkbox	节点是否可被选择	boolean	false
show-line	是否显示连接线	boolean	false
default-expanded-keys	默认展开的节点的 key 的数组	array	[]
default-checked-keys	默认勾选的节点的 key 的数组	array	[]
accordion	是否每次只打开一个同级树节点展开	boolean	false
indent	相邻级节点间的水平缩进，单位为像素	number	18
icon	自定义树节点的图标	Component	-
expand-on-click-node	是否在点击节点的时候展开或者收缩节点	boolean	true

Props Attributes

属性名	说明	类型	默认值
label	指定节点标签为节点对象的某个属性值	string, function(data, node)	label
children	指定子树为节点对象的某个属性值	string	children
disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)	disabled
isLeaf	指定节点是否为叶子节点	boolean, function(data, node)	isLeaf

Tree Events

事件名	说明	回调参数
node-click	节点被点击时的回调	(data: object)
node-expand	节点被展开时触发的事件	(data: object)
node-collapse	节点被关闭时触发的事件	(data: object)
check-change	节点选中状态发生变化时的回调	(data: object, checked: boolean)

Tree Slots

插槽名	说明
default	自定义树节点的内容，参数为 '{ node, data }'