# 虚拟化树形控件

# 基础用法

基础的树形结构展示

# 可选择的虚拟树

适用于需要选择层级时使用。

# 节点过滤

在需要对节点进行过滤时,调用 Tree 实例的 filter 方法, 参数为关键字。 需要注意的是,此时需要设置 filter-method,值为过滤函数。

# Attributes

Attribute Description Type Default
data 展示数据 array
empty-text 内容为空的时候展示的文本 string
height 容器高度 Number 200
item-size 每行高度 Number 26
props 配置选项,具体看下表 object
highlight-current 是否高亮当前选中节点 boolean false
expand-on-click-node 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点 boolean true
check-on-click-node 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点 boolean false
default-expanded-keys 默认展开的节点的 key 的数组 array
show-checkbox 节点是否可被选择 boolean false
check-strictly 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false boolean false
default-checked-keys 默认勾选的节点的 key 的数组 array
current-node-key 当前选中的节点 string, number
filter-method 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示, 返回 false 则表示这个节点会被隐藏 Function(value, data)
indent 相邻级节点间的水平缩进,单位为像素 number 16
icon 自定义树节点的图标 string / Component -

# props

Attribute Description Type Default
value 每个树节点用来作为唯一标识的属性,在整棵树中应该是唯一的 string, number id
label 指定节点标签为节点对象的某个属性值 string label
children 指定子树为节点对象的某个属性值 string children
disabled 指定节点选择框是否禁用为节点对象的某个属性值 disabled string disabled

# Method

Tree内部使用TreeNode类型的对象来包装用户传入的数据,用来构造树节点之间的关系。 Tree 暴露了以下方法:

Method Description Parameters
filter 对树节点进行筛选操作 (query: string)
getCheckedNodes 若节点可被选择(即show-checkbox为 true),则返回目前被选中的节点所组成的数组 (leafOnly: boolean)
getCheckedKeys 若节点可被选择(即 show-checkbox 为 true),则返回目前被选中的节点的 key 所组成的数组 (leafOnly: boolean)
setCheckedKeys 通过 keys 设置目前勾选的节点 (keys: TreeKey[])
setChecked 通过 key 设置某个节点的勾选状态 (key: TreeKey, checked: boolean)
getHalfCheckedNodes 若节点可被选择(即 show-checkbox 为 true),则返回目前半选中的节点所组成的数组 -
getHalfCheckedKeys 若节点可被选择(即 show-checkbox 为 true),则返回目前半选中的节点的 key 所组成的数组 -
getCurrentKey 获取当前被选中节点的 key,若没有节点被选中则返回 undefined -
getCurrentNode 获取当前被选中节点的 data,若没有节点被选中则返回 undefined -
setCurrentKey 通过 key 设置某个节点的当前选中状态 (key: TreeKey)
setData 设置空间数据 (data: TreeData)

# Events

Event Name Description Parameters
node-click 当节点被点击的时候触发 (data: TreeNodeData, node: TreeNode, e: MouseEvent)
node-contextmenu 当节点被鼠标右键点击时会触发该事件 (e: Event, data: TreeNodeData, node: TreeNode)
check-change 节点选中状态发生变化时的回调 (data: TreeNodeData, checked: boolean)
check 当复选框被点击的时候触发 (data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,})
current-change 当前选中节点变化时触发的事件 (data: TreeNodeData, node: TreeNode)
node-expand 节点被展开时触发的事件 (data: TreeNodeData, node: TreeNode)
node-collapse 节点被收起时触发的事件 (data: TreeNodeData, node: TreeNode)

# Slots

Name Description
- 自定义树节点的内容。 作用域参数为 { node: TreeNode, data: TreeNodeData }
icon 自定义展开收起图标。 作用域参数为 { node: TreeNode, data: TreeNodeData }