Vue Tree

简体中文

English

简体中文

English

VTree API ​

VTree Props ​

属性说明类型默认值
value选中的值，可用 v-model ；单选为字符串或数字，多选为 separator 分隔的字符串或数组，优先多选string | number | Array<string | number>无
data传入的树数据。数据量大时，不建议通过 props 传入数据，建议用 setData 方法代替object[][]
unloadDataList供未加载且选中节点查询 title 字段值用的列表，格式与 data 一致即可object[][]
showUnloadCheckedNodes过滤已选时是否在列表后面展示未加载的已选节点booleantrue
emptyText数据为空时显示的文本string'暂无数据'
titleField节点标题字段string'title'
keyField节点唯一标识字段string'id'
separator多选模式下 value 分隔符string','
checkable是否可多选booleanfalse
selectable是否可单选booleanfalse
filteredNodeCheckable是否可勾选被过滤节点booleanfalse
cascade父子节点是否关联booleantrue
enableLeafOnly是否只启用子节点，当 多选且父子不关联 或 单选 时有效booleanfalse
disableAll是否禁用所有节点booleanfalse
defaultExpandAll是否默认展开所有节点booleanfalse
defaultExpandedKeys Deprecated默认展开的节点 keyArray<string | number>[]
expandedKeys 2.2.0展开的节点 key ，组件内部将会响应此 Prop 的变化Array<string | number>[]
draggable是否可拖拽booleanfalse
droppable是否可放置booleanfalse
beforeDropMethod在放置节点之前执行的方法，返回 true 允许放置， false 可阻止放置(dragKey: string | number, dropKey: string | number, hoverPart: 'before' | 'body' | 'after') => boolean() => true
ignoreMode忽略模式，指定 getCheckedNodes, getCheckedKeys 与 v-model 默认要忽略的部分'none' | 'parents' | 'children''none'
autoLoad异步加载初始化时是否自动加载根节点booleantrue
load异步加载方法(node: null | TreeNode, resolve: Function, reject: Function) => any无
render节点渲染 render 函数(h: CreateElement, node: TreeNode) => VNode无
filterMethod节点过滤方法(keyword: string, node: TreeNode) => boolean无
expandOnFilter 2.1.0过滤时是否展开所有可见节点booleantrue
unselectOnClick 2.1.0点击已选中节点是否取消选中booleantrue
loading是否显示 loading 图标booleanfalse
nodeClassName节点根元素的 class ，传入函数以对每个节点定制 classstring | object | Array<string | object> | (node: TreeNode) => string | object | Array<string | object>无
showLine 4.0.0是否显示连接线，可指定连接线的宽度、颜色、实线、虚线，以及是否有折线；虚线密度 dashDensity 4.1.0 类型为 1-10 的整数boolean | { width?: number, type?: 'dashed' | 'solid', color?: string, polyline?: boolean, dashDensity?: number }无，如果传入的非 boolean，则默认为 { width: 1, type: 'solid', color: '#D3D3D3', polyline: false, dashDensity: 3 }
animation 4.0.0是否启用过渡动画，目前仅控制展开收起boolean无
nodeMinHeight根据节点最小高度计算数据总高度number30
nodeIndent子节点缩进number20
renderNodeAmount渲染节点数量，可见节点数大于此值且高度超过(容器可视高度能容纳节点数 + bufferNodeAmount)则不会渲染所有可见节点number100
bufferNodeAmount当滚动到视野外的节点个数大于此值时刷新渲染节点number20

VTree Events ​

注：从 2.0.8 起，事件中返回的节点信息都是包括 _parent 与 children 的完整节点信息（拖拽事件的 dataTransfer 除外）。

事件名说明返回值
input选中节点改变时触发选中的节点
expand展开/折叠时触发节点信息
check勾选时触发（多选）被勾选的节点信息
uncheck取消勾选时触发（多选）被取消勾选的节点信息
checked-change勾选/取消勾选时触发（多选）所有被勾选节点（数组）
select选中时触发（单选）被选中的节点信息
unselect取消选中时触发（单选）被取消选中的节点信息
selected-change选中/取消选中时触发（单选）被选中节点
click点击节点时触发节点信息, 鼠标事件
node-dblclick双击节点时触发节点信息, 鼠标事件
node-right-click右击节点时触发节点信息, 鼠标事件
node-dragstart开始拖拽节点时触发节点信息, 拖拽事件对象
node-dragenterdragenter 时触发节点信息 , 拖拽事件对象, 事件触发的节点部位 'before' | 'body' | 'after'
node-dragoverdragover 时触发节点信息 , 拖拽事件对象, 事件触发的节点部位 'before' | 'body' | 'after'
node-dragleavedragleave 时触发节点信息 , 拖拽事件对象, 事件触发的节点部位 'before' | 'body' | 'after'
node-drop放置节点时触发节点信息 , 拖拽事件对象, 事件触发的节点部位 'before' | 'body' | 'after'

VTree Methods ​

方法说明参数返回值
setData使用此方法重置树数据，可避免大量数据被 vue 监听data: object[]: 同 data Propvoid
setChecked设置多选选中/取消选中key: string | number: 节点 key
value: boolean: 是否选中		void
setCheckedKeys批量设置选中/取消选中keys: Array<string | number>: 节点 key
value: boolean: 是否选中		void
checkAll设置所有数据全选无void
clearChecked清空选中无void
setSelected设置单选选中/取消选中key: string | number: 节点 key
value: boolean: 是否选中		void
setExpand设置展开/折叠key: string | number: 节点 key
value: boolean: 是否展开
expandParent: boolean = true: 如果是展开是否同时展开父节点 2.0.6		void
setExpandKeys批量展开/折叠keys: Array<string | number>: 节点 key
value: boolean: 是否展开		void
setExpandAll设置全部展开/折叠value: boolean: 是否展开void
getCheckedNodes获取多选选中节点ignoreMode: 'none' | 'parents' | 'children': 需要忽略的部分，默认为 ignoreMode PropTreeNode[]
getCheckedKeys获取多选选中节点 keyignoreMode: 'none' | 'parents' | 'children': 需要忽略的部分，默认为 ignoreMode PropArray<string | number>
getIndeterminateNodes获取半选状态的节点无TreeNode[]
getSelectedNode获取单选选中节点无TreeNode | null
getSelectedKey获取单选选中节点 key无TreeNode | null
getExpandNodes获取展开的节点无TreeNode[]
getExpandKeys获取展开的节点 key无TreeNode[]
getCurrentVisibleNodes获取当前可见的节点无TreeNode[]
getNode根据 key 获取节点key: string | number: 节点 keyTreeNode | null
getTreeData获取树形结构的节点数据无TreeNode[]
getFlatData获取扁平化后的节点数据无TreeNode[]
getNodesCount获取节点总数量无number
insertBefore在参照节点前插入一个节点insertedNode: 节点 key 或者单个节点数据
referenceKey: string | number: 参照节点 key		TreeNode | null 返回插入的节点
insertAfter在参照节点后插入一个节点insertedNode: 节点 key 或者单个节点数据
referenceKey: string | number: 参照节点 key		TreeNode | null 返回插入的节点
append在父节点第一层子节点的末尾插入一个节点insertedNode: 节点 key 或者单个节点数据
parentKey: string | number: 父节点 key		TreeNode | null 返回插入的节点
prepend在父节点第一层子节点的开头插入一个节点insertedNode: 节点 key 或者单个节点数据
parentKey: string | number: 父节点 key		TreeNode | null 返回插入的节点
remove删除节点removedKey: string | number: 要删除的节点 keyTreeNode | null 返回删除的节点
filter过滤节点keyword: string: 过滤关键词
filterMethod: (keyword: string, node: TreeNode) => boolean: 过滤方法，默认为 filterMethod Prop ，如果没有传 filterMethod Prop 则为搜索 title 字段的一个内置方法		void
showCheckedNodes展示已选节点showUnloadCheckedNodes: boolean: 是否显示未加载的选中节点，默认为 Prop 传入的值void
loadRootNodes从远程加载根节点无Promise<void>
updateNode 4.1.0更新单个节点key: string | number: 节点 key
newNode: object: 新节点数据，某些字段将被忽略，例如以下划线 "_" 开头的字段，以及 key 字段和 indeterminate, visible, isLeaf 等		void
updateNodes 4.1.0更新多个节点newNodes: object[]: 新节点数据数组，与 updateNode 相同，特定的字段会被忽略，且没有 key 字段的元素将被忽略void
scrollTo滚动到指定节点位置key: string | number: 节点 key
verticalPosition: 'top' | 'center' | 'bottom' | number: 滚动的垂直位置		void

VTree Slots ​

名称说明
empty暂无数据
loading加载中显示的图标
node 4.0.0自定义节点，slotProps 为 { node: TreeNode }

VTree Data Fields ​

注：以 '_' 开头的字段最好不要覆盖，以免影响内部处理逻辑

字段说明
id默认以 'id' 作为 key 字段，也可以通过 keyField Prop 指定其他字段作为 key 字段
title默认显示的名称，可通过 titleField Prop 指定其他字段作为 title 字段
checked多选模式下是否勾选
selected单选模式下是否选中
indeterminate多选模式下是否半选状态
disabled是否禁用
expand父节点有效，节点展开状态
visible是否可见
_filterVisible过滤后是否可见，如果为 false 则在其他可见情况下也是不可见的
_parent父节点
children子节点数组
isLeaf标记节点是否为叶子节点
_level节点层级，默认从 0 开始
_loading节点是否正在加载
_loaded节点是否已经加载过，异步加载下有效