TinyVue Tree 树形控件完全指南层级数据展示的瑞士军刀本文基于 OpenTiny TinyVue 官方 API 与示例整理组件包opentiny/vue如果你做过后台管理系统一定见过这种场景左侧一棵目录树右侧一堆表格中间还夹着权限勾选——Tree 组件就是干这个的。TinyVue 的Tree组件功能相当全面从基础展示到懒加载、拖拽、编辑、右键菜单基本把树形交互的坑都填平了。快速上手Tree 通过data属性传入数据源默认读取每项的label和children字段template tiny-tree :datadata default-expand-all node-clicknodeClick / /template script setup import { ref } from vue import { TinyTree } from opentiny/vue const data ref([ { id: 1, label: 数据 1, children: [ { id: 1-1, label: 数据 1-1, children: [{ id: 1-1-1, label: 数据 1-1-1 }] }, { id: 1-2, label: 数据 1-2 } ] }, { id: 2, label: 数据 2, children: [ { id: 2-1, label: 数据 2-1 }, { id: 2-2, label: 数据 2-2 } ] } ]) function nodeClick(data, node, vm) { console.log(点击节点, data.label) } /script几个常用外观属性属性说明默认值show-line是否显示连接线falsesize组件尺寸medium/small-indent相邻级水平缩进px18非标准数据格式后端返回的字段名不是label/children用props做字段映射tiny-tree :datadata :props{ children: subs, label: name, disabled: disabled, isLeaf: isLeaf } /disabled控制节点禁用isLeaf懒加载模式下标记叶子节点点了不再请求子数据节点高亮与选中高亮和查询都依赖node-key指定唯一标识tiny-tree node-keyid :datadata highlight-current :current-node-key2-1 current-changeonCurrentChange /常用实例方法// 查询treeRef.value.getCurrentNode()treeRef.value.getCurrentKey()treeRef.value.getNode(2-1)treeRef.value.getNodePath(2-1-1)// 设置高亮treeRef.value.setCurrentKey(2-1)treeRef.value.setCurrentNode(nodeData)实用技巧通过getNode()拿到的节点对象可以访问parent、childNodes、nextSibling等属性还能调用expand()/collapse()控制展开收起——比手动改data优雅多了。展开控制属性 / 方法说明default-expand-all初始全部展开default-expanded-keys初始展开指定 key 数组需配合node-keyexpand-on-click-node点击文字是否展开默认true设为false则只有点图标才展开expandAllNodes(true/false)一键全部展开/收起accordion手风琴模式同时只展开一个同级节点监听node-expand和node-collapse即可追踪展开状态变化。多选模式Checkbox开启多选tiny-tree node-keyid :datadata show-checkbox :check-on-click-nodetrue :default-checked-keys[2] :expand-on-click-nodefalse /严格模式check-strictly父子勾选互不影响适合权限分配等场景。勾选相关 API// 查询treeRef.value.getCheckedKeys(leafOnly)treeRef.value.getCheckedNodes(leafOnly,includeHalfChecked)treeRef.value.getHalfCheckedKeys()// 设置treeRef.value.setCheckedKeys([1,2-1])treeRef.value.setChecked(nodeOrKey,checked,deep)事件区别check触发在被点击的节点上参数为节点 整体勾选状态check-change每个状态变化的节点都会触发一次勾选可能连发多个懒加载大数据量或按需加载子节点时lazyload是标配tiny-tree lazy :loadload load-dataonLoadData /functionload(node,resolve){if(node.level0){// 首次加载根节点resolve([{id:1,label:数据 1},{id:2,label:数据 2}])}elseif(node.data){// 点击后加载子节点fetchChildren(node.data.id).then(childrenresolve(children))}}注意懒加载模式下data属性无效子数据全靠resolve()回调返回。props.isLeaf标记叶子节点后点击不再触发load。节点增删改不用改原始data直接调实例方法treeRef.value.insertBefore(newNode,targetKey)// 前插treeRef.value.insertAfter(newNode,targetKey)// 后插treeRef.value.append(newNode,targetKey)// 追加为子节点顶部treeRef.value.remove(targetKey,isSaveChildNode)// 删除true 时子节点上移treeRef.value.updateKeyChildren(key,children)// 替换全部子节点更新子节点又要保留原有子节点先getNode()拿到children改完再updateKeyChildren()。拖拽tiny-tree draggable :allow-dragallowDrag :allow-dropallowDrop node-droponDrop /functionallowDrag(node){return!node.data.disabled}functionallowDrop(srcNode,targetNode,type){// type: prev | inner | nextreturntype!inner// 示例禁止拖入节点内部}拖拽过程还会触发node-drag-start、node-drag-enter、node-drag-over、node-drag-leave、node-drag-end等事件。频率较高建议加节流。编辑模式适合可维护的目录树场景treeRef.value.openEdit()// 进入编辑treeRef.value.addNode(parentNode)// 添加子节点并进入编辑treeRef.value.editNode(node)// 编辑指定节点treeRef.value.saveNode()// 保存当前编辑treeRef.value.saveEdit()// 保存全部并返回变更数据treeRef.value.closeEdit()// 取消编辑权限控制属性 / 方法作用add-disabled-keys/setAddDisabledKeys禁止添加edit-disabled-keys/setEditDisabledKeys禁止编辑delete-disabled-keys/setDeleteDisabledKeys禁止删除delete-node-method自定义删除钩子返回false或 reject 则取消删除编辑事件open-edit、close-edit、save-edit、add-node、edit-node、delete-node。过滤与平铺视图搜索过滤tiny-tree reftreeRef :datadata node-keyid :filter-node-methodfilterNode highlight-query / !-- 触发过滤 -- tiny-input v-modelkeyword inputtreeRef.filter(keyword) /functionfilterNode(value,data){if(!value)returntruereturndata.label.includes(value)}view-typeplain切换平铺视图配合show-auxi显示上级路径搜索场景体验更好。插槽扩展插槽用途default自定义节点内容prefix/suffix节点前后元素operation靠右对齐操作区empty无数据时的占位contextmenu右键菜单需show-contextmenu也可用render-content函数属性做 JSX 渲染。其它实用特性单选模式show-radio但官方建议尽量不用多选用 checkbox 更灵活右键菜单show-contextmenucontextmenu插槽用closeMenu()关闭键盘导航默认支持 ↑↓ 移动、←→ 展开收起、Enter/Space 勾选连接线show-line让层级关系一目了然小结TinyVue Tree 不是「能展示层级就完事」的基础组件而是一套完整的树形交互方案展示层连接线、尺寸、缩进、自定义图标/插槽交互层高亮、多选/单选、展开控制、过滤搜索数据层懒加载、增删改、拖拽排序编辑层内置编辑模式 细粒度权限下次做组织架构、菜单权限、文件目录直接tiny-tree安排上别自己用ul li递归写到怀疑人生。相关链接组件包opentiny/vue官方文档OpenTiny TinyVue