Skip to content

VirtTree API

Tree Attributes

AttributeDescriptionTypeDefaultRequired
listlistTreeNodeData[]-
minSize最小尺寸,会根据这个尺寸来计算可视区域内个数number32
indent相邻级节点间的水平缩进,单位为像素number16
iconSize图标大小number16
itemGapthe gap between item (item size include itemGap)Number0
showLine是否显示层级线booleanfalse
[expand] expandedKeys.sync 展开的节点的 key 集合TreeNodeKey[][]
[expand] defaultExpandAll是否默认展开节点booleantrue
[expand] expandOnClickNode点击元素是否展开 (仅在selectable=false&checkOnClickNode=false时生效)booleantrue
[checkable] checkable是否有checkboxbooleanfalse
[checkable] checkedKeys.sync 勾选的节点的 key 集合,只在showCheckbox为 true 的时候生效TreeNodeKey[][]
[checkable] checkOnClickNode点击节点是否可以选中checkboxbooleanfalse
[checkable] checkedStrictly在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 falsebooleanfalse
[selectable] selectable是否可以选中booleanfalse
[selectable] selectedKeys.sync 选中的节点的 key 集合,只在selectable为 true 的时候生效TreeNodeKey[][]
[selectable] selectMultiple是否可以多选booleanfalse
[focus] focusedKeys.sync 激活的节点的 key 集合,也可以是一个节点TreeNodeKey|TreeNodeKey[][]
[draggable] draggable是否开启拖拽booleanfalse
[draggable] dragClass拖拽的节点classstring``
[draggable] dragGhostClass拖拽的克隆节点classstring``
[draggable] beforeDrag拖拽进入每个节点前的回调,返回true代表可以完成该拖拽,返回false代表不可以完成() => boolean``
filterMethod对树节点进行筛选时执行的方法,返回 true 显示, 返回 false 被隐藏() => boolean-
fieldNames配置选项TreeFieldNames-
其他属性同VirtList属性---

Tree Methods

MethodDescriptionParameters
expandAll设置全部节点的展开状态(expanded: boolean)
expandNode展开指定节点(key: TreeNodeKey|TreeNodeKey[], expanded: boolean)
scrollTo展开指定节点({key?: string | number; align?: 'view' | 'top'; offset?: number;})

Tree Events

事件名描述参数
select点击树节点时触发selectedKeys: Array<string | number>
data: { selected?: boolean; selectedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }
check点击树节点复选框时触发。halfCheckedKeyshalfCheckedNodes2.19.0 开始支持。checkedKeys: Array<string | number>
data: { checked?: boolean; checkedNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; halfCheckedKeys: (string | number)[]; halfCheckedNodes: TreeNodeData[]; }
expand展开/关闭expandKeys: Array<string | number>
data: { expanded?: boolean; expandNodes: TreeNodeData[]; node?: TreeNodeData; e?: Event; }
drag-start节点开始拖拽ev: DragEvent
node: TreeNodeData
drag-end节点结束拖拽ev: DragEvent
node: TreeNodeData
drag-over节点被拖拽至可释放目标ev: DragEvent
node: TreeNodeData
drag-leave节点离开可释放目标ev: DragEvent
node: TreeNodeData
drop节点在可释放目标上释放data: { e: DragEvent; dragNode: TreeNodeData; dropNode: TreeNodeData; dropPosition: number; }

Tree Slots

NameDescription
icon图标插槽, 作用域参数为 { node }
content节点内容插槽, 作用域参数为 { node }
default节点 item 内容, 作用域参数为 { node, data, expand }
header节点 item 内容, 作用域参数为 { node, data, expand }
footer节点 item 内容, 作用域参数为 { node, data, expand }

TreeNode

参数名描述类型默认值
key唯一标示string | number-
level层级number1
title该节点显示的标题string-
isLeaf是否是叶子节点。动态加载时有效booleanfalse
isLast是否是当前层级的最后节点booleanfalse
parent父级TreeNode[]1
children子节点TreeNode[]-
disableSelect是否禁用选中booleanfalse
disableCheckbox是否禁用复选框booleanfalse
data定制 drag 图标,优先级大于 tree() => VNode-

TreeFieldNames

AttributeDescriptionTypeDefaultRequired
key每个树节点用来作为唯一key的属性string, numberkey
title指定节点标签为节点对象的某个属性值stringtitle
children指定子树为节点对象的某个属性值stringchildren
disableSelect禁止选中stringdisableSelect
disableCheckbox禁止复选框勾选stringdisableCheckbox
disableDragIn禁止拖入该节点stringdisableDragIn
disableDragOut禁止拖出该节点stringdisableDragOut