Vue3自研开源Tree组件:人性化的拖拽API设计

针对Element Plus Tree组件拖拽功能API用的麻烦,小卷开发了一个API使用简单的JuanTree组件。拖拽功能用起来非常简单!

文章目录

使用示例

组件的使用很简单:

通过ref引用tree组件,可操作其expose出来的方法,比如,保存节点操作(新增、删除和重命名节点)的变更、新增一级节点:

通过v-model绑定勾选项,data属性绑定初始化树形结构的嵌套数据,option-props用于绑定组件的选项:

allowDrop方法,用来让用户控制哪些节点不允许drop操作;当然哪些节点不允许drag也可以由相应的方法来控制,比如下面的逻辑控制:

allowDrag

比如44这个节点无法拖动:

allowDrop

演示拖拽drop的限制,Java Web节点不能释放在a11a22节点上,超过了5级限制。

支持节点勾选

在拖拽完成后,节点的勾选状态能保证一致性

支持dirty检测

在编辑节点的情况下,要先保存变更才能继续拖拽

后台API交互

提供了便捷的拖拽回调接口

这里给用户进行拖拽的后台API提供了必要的参数,如果参数不够可以后期再扩展,同时提供了回调的done函数,调用了done()才更新拖拽后的节点,非常的人性化!

源码实现

见后续会员教程分享

相关推荐
创梦流浪人2 天前
soli-admin一款开箱即用的RBAC后台项目
java·spring boot·vue3·springsecurity
发现一只大呆瓜2 天前
深入浅出 AST:解密 Vite、Babel编译的底层“黑盒”
前端·面试·vite
发现一只大呆瓜2 天前
前端模块化:CommonJS、AMD、ES Module三大规范全解析
前端·面试·vite
墨鱼笔记2 天前
前端必看:Vite.config.js 最全配置指南 + 实战案例
前端·vite
问道飞鱼3 天前
【前端知识】使用React+Vite构建企业级项目模板
前端·react.js·前端框架·vite
晓得迷路了4 天前
栗子前端技术周刊第 121 期 - Vitest 4.1、Nuxt 4.4、Next.js 16.2...
前端·javascript·vite
朱建伟5 天前
大神尤雨溪再次出手,前端工具链整合--该文章是对vite plus官方README文档进行了翻译
前端·vite
floret. 小花5 天前
Vue3 + Electron 知识点总结 · 2026-03-21
前端·面试·electron·学习笔记·vue3
木斯佳5 天前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式
阿帕琪尔5 天前
😎vite插件: 自动打包压缩图片和转webp(二)
前端·vite