Tree V2 虚拟化树形控件beta

不论你的数据量多大,虚拟树都能毫无压力地处理。

基础用法

基础的树形结构展示

可选择的虚拟树

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

禁用复选框

节点的复选框可以设置为禁用。

默认扩展和默认检查

树节点可以在初始化阶段被设置为展开或选中。

自定义节点内容

节点的内容支持自定义,可以在节点区添加按钮或图标等内容

节点过滤

树节点可以过滤

TreeV2 属性

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

props

属性说明类型默认值
value每个树节点用来作为唯一标识的属性,在整棵树中应该是唯一的string, numberid
label指定节点标签为节点对象的某个属性值stringlabel
children指定子树为节点对象的某个属性值stringchildren
disabled指定节点选择框是否禁用为节点对象的某个属性值stringdisabled

TreeV2 方法

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

方法说明参数
filter对树节点进行筛选操作(query: string)
getCheckedNodes若节点可被选择(即show-checkboxtrue),则返回目前被选中的节点所组成的数组(leafOnly: boolean)
getCheckedKeys若节点可被选择(即 show-checkboxtrue),则返回目前被选中的节点的 key 所组成的数组(leafOnly: boolean)
setCheckedKeys通过 keys 设置目前勾选的节点(keys: TreeKey[])
setChecked通过 key 设置某个节点的勾选状态(key: TreeKey, checked: boolean)
getHalfCheckedNodes若节点可被选择(即 show-checkboxtrue),则返回目前半选中的节点所组成的数组-
getHalfCheckedKeys若节点可被选择(即 show-checkboxtrue),则返回目前半选中的节点的 key 所组成的数组-
getCurrentKey获取当前被选中节点的 key,若没有节点被选中则返回 undefined-
getCurrentNode获取当前被选中节点的 data,若没有节点被选中则返回 undefined-
setCurrentKey通过 key 设置某个节点的当前选中状态(key: TreeKey)
setData当数据量非常庞大的时候,使用 reactive 数据将导致性能非常低下,所以我们提供了一个能够规避这种情况的方法(data: TreeData)

TreeV2 事件

事件名说明参数
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)

TreeV2 插槽

名称说明
-自定义树节点的内容。 作用域参数为 { node: TreeNode, data: TreeNodeData }

源代码

组件文档

贡献者