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

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

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

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

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

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

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

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

后台API交互
提供了便捷的拖拽回调接口

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

源码实现
见后续会员教程分享