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()才更新拖拽后的节点,非常的人性化!

源码实现

见后续会员教程分享

相关推荐
做前端的娜娜子13 小时前
施工蓝图:vite.config.js —— 项目的指挥中心
前端·react native·vite
D_jing202 天前
【踩坑解决】pnpm+Vite引入@koi/core报错spark-md5找不到模块(幽灵依赖深度解析)
pnpm·vite·幽灵依赖·前端踩坑
Flynt2 天前
pnpm 12 换上了 Rust 内核,我拿项目实测了一轮构建速度
rust·vite·前端工程化
xiaoyan20153 天前
2026最新款Electron41+React19+AntDesign电脑端后台管理系统Exe
react.js·electron·vite
梨想橙汁3 天前
Vite 优化、踩坑汇总 + Webpack 迁移 Vite 实战
前端·webpack·vite
猫不易4 天前
Webpack 与 Vite:从 Loader / Plugin 到 Rolldown 统一引擎
前端·vite
今日无bug4 天前
从0到1手撕流式输出:Vue3 + Vite 实现 LLM 流式响应全解析
前端·vue.js·vite
天道kabuto4 天前
Vite 项目报错 @rollup/rollup-win32-x64-msvc 的解决与版本锁定
vite
天道kabuto4 天前
Webpack 迁 Vite 踩坑记:一个让人抓狂的 Sourcemap 报错怎么破?
webpack·vite
RuoyiOffice5 天前
SpringBoot3+Vue3 最推荐的开源 OA 系统 2026:流程驱动、资源闭环、多端互通
spring boot·vue3·flowable·oa·协同办公·spring boot 3·开源oa