Tree 树形

规则

基础示例（默认勾选）

形态示例

整段禁用（节点禁用）

节点数据设置 disabled: true；props 默认已映射 disabled 字段。

Events 示例

Props

名称	类型	默认值	说明
accordion	boolean	false	是否为手风琴模式，每次只打开一个同级树节点展开
add-disabled-keys	string[]	—	禁止添加的节点 key 值列表，也可通过 setAddDisabledKeys 方法设置
after-load	(nodes: object[]) => void	—	下级树节点数据加载完毕后的回调函数
allow-drag	(node) => boolean	—	判断节点能否被拖拽
allow-drop	(srcNode, targetNode, type) => void	—	拖拽时判定目标节点能否被放置。type：prev（前）、inner（插入至节点）、next（后）
check-on-click-node	boolean	false	是否点击节点时自动勾选节点
check-strictly	boolean	false	是否为父子严格模式
current-node-key	string	—	当前选中节点
data	Array	—	数据源；默认通过数据项的 label、children 展示
default-checked-keys	string[]	—	默认勾选的节点的 keys
default-expand-all	boolean	false	是否默认展开所有节点
default-expanded-keys	string[]	[]	默认展开节点的 keys；属性变化时会收起全部并重新展开指定项
delete-disabled-keys	string[]	—	禁止删除的节点 key 值列表，也可通过 setDeleteDisabledKeys 方法设置
delete-node-method	(node) => boolean | Promise<unknown>	—	删除节点的钩子函数；返回 false 或返回 Promise 且被 reject 则停止删除
draggable	boolean	false	是否开启节点拖拽
edit-config	ITreeEditConfig	{}	编辑模式参数配置（新增节点 id、重复警告等）
edit-disabled-keys	string[]	—	禁止编辑的节点 key 值列表，也可通过 setEditDisabledKeys 方法设置
empty-text	string	—	内容为空时展示的文本
expand-icon	Component	—	指示展开的图标
expand-icon-color	string	—	指示展开的图标色
expand-on-click-node	boolean	true	节点在点击内容时是否展开 / 收起
filter-node-method	(value, data, node) => boolean	—	筛选树节点；返回 true 显示，false 隐藏
highlight-current	boolean	true	是否高亮当前选中节点
highlight-query	boolean	false	是否在匹配的节点中高亮搜索文字
icon	Component	—	自定义节点图标
icon-trigger-click-node	boolean	true	点击图标展开节点时是否触发 node-click
indent	number	18	相邻级节点水平缩进（像素）
lazy	boolean	false	是否为异步加载模式，展开节点时再请求数据
load	(node, resolve) => void	—	加载子树数据；在 load 内调用 resolve(data) 表示返回下级数据成功
node-key	string	—	节点唯一标识属性名称
only-check-children	boolean	false	是否只能选中叶子节点
props	object	{ children: 'children', label: 'label', disabled: 'disabled', isLeaf: 'isLeaf' }	非标准数据格式时指定字段映射
render-after-expand	boolean	true	是否在首次展开某节点后才渲染其子节点
render-content	(h: Vue.h, { node, data, store }) => VNode	—	树节点内容区渲染函数
show-auxi	boolean	true	平铺视图模式下是否显示节点上级路径辅助信息
show-check-easily	boolean	false	严格模式下是否显示「勾选父节点自动勾选子节点」区域
show-checkbox	boolean	false	是否为多选模式
show-checked-mark	boolean	false	非多选且为 true 时，选中行右侧显示 √
show-contextmenu	boolean	false	是否启用右键菜单
show-line	boolean	false	是否显示连接线
show-radio	boolean	false	是否为单选模式
shrink-icon	Component	—	指示收缩的图标
shrink-icon-color	string	—	指示收缩的图标色
size	'medium' | 'small'	—	组件大小
view-type	'tree' | 'plain'	tree	视图模式：tree 普通树，plain 平铺

Events

名称	类型	说明
add-node	(node) => void	添加节点
check	(data, currentChecked) => void	勾选节点后；data 当前选中节点，currentChecked 组件当前选中状态
check-change	(data, checked, indeterminate) => void	节点选中状态变化；data 节点信息，checked 勾选状态，indeterminate 半选状态
check-plain	(plainNode, value) => void	平铺模式下勾选/取消勾选（需 show-checkbox）；value 为 true/false
close-edit	() => void	关闭编辑
current-change	(data, currentNode) => void	当前选中节点变化；currentNode 为节点状态信息
delete-node	(node) => void	删除节点
edit-node	(node) => void	修改节点
leave-plain-view	(plainNode, event) => void	平铺模式下点击节点定位图标；event 为原生事件
load-data	(data) => void	懒加载加载成功；data 为加载的数据
node-click	(data, node, vm) => void	点击节点；node 节点状态，vm 组件实例
node-collapse	(data, node, vm) => void	收缩节点后
node-contextmenu	(event, data, node, vm) => void	节点右键；event 原生事件
node-drag-end	(srcNode, targetNode, dropType, event) => void	拖拽结束（可能未成功）；dropType：before/after/inner/none
node-drag-enter	(srcNode, targetNode, event) => void	拖拽进入其他节点
node-drag-leave	(srcNode, targetNode, event) => void	拖拽离开节点
node-drag-over	(srcNode, targetNode, event) => void	在节点上拖拽移动
node-drag-start	(node, event) => void	开始拖拽节点
node-drop	(srcNode, targetNode, dropType, event) => void	拖拽成功完成
node-expand	(data, node, vm) => void	展开节点后
open-edit	() => void	进入编辑
save-edit	(changedData, finalData) => void	保存编辑