【el-tree】树形结构拖拽

之前做项目有遇到过使用el-tree的，但是树形结构拖拽还是第一次遇到，开始觉得会好难（心里暗示），因为考虑到好多种情况，做完之后其实还好，在此记录一下~

首先，树形结构的拖拽---

 <el-treev-model="filterText"//过滤class="tree":data="projectNameOptions"node-key="id":props="chapterProps"           default-expand-all//默认展开所有节点    :filter-node-method="filterNode"ref="projectNameOptions"            draggable//是否开启拖拽节点功能，默认为false@node-drop="handleDrop"//拖拽完成时触发的事件//共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event>

其实，只需要一个属性即可：

前端拖拽一个属性就搞定了，so easy，接下来就是让人头疼的地方了，前端拖拽之后我们需要持久化到数据库呀，不然拖拽只是前端的一个动画效果而已。为什么说是让人头疼的地方呢，因为当时考虑了好多好多种情况，整个人脑子都要炸了，感激这位网友的这篇博客真的是救了我一命=ElementUI El-Tree 任意拖拽排序方法，最小粒度数据变更范围（通用排序）_小狐狸和小兔子-CSDN博客_eltree拖拽排序实现思路

详情如下：

// 拖拽完成时触发的事件  参数依次为：被拖拽节点、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event//注意：目标节点是已经移动完之后的节点handleDrop: async function(draggingNode, dropNode, dropType, ev) {//定义一个空数组用于存放需要持久化到数据库的节点var paramData = [];//当拖拽类型不为inner,说明只是在现有的节点间移动，只需要寻找目标节点的父ID，获取其对象以及所有的子节点,data为目标节点的父节点;//否则，当拖拽类型为inner,说明拖拽节点成为了目标节点的子节点,只需要获取目标节点对象即可,data为目标节点var data = dropType != "inner" ? dropNode.parent.data : dropNode.data;//目标节点的level==1即目标节点为一级节点，//并且拖拽类型不为inner即当前节点将成为与目标节点同一层级的节点,也是一级节点//nodeDate=data,通过上面的公式data=dropNode.parent.data,因此,nodeData=dropNode.parent.data,但是因为目标节点已经是一级节点了,因此,nodeData还是目标节点//否则//目标节点的level==1即目标节点为一级节点，//并且拖拽类型为inner即当前节点将成为目标节点的子节点即二级节点//nodeDate=data.childrens,通过上面的公式data=dropNode.parent.data,因此,nodeData=dropNode.parent.data.childrens,即为目标节点的父节点的子节点，即目标节点同一层级的节点//或者//目标节点的level!=1即目标节点不是一级节点，//并且拖拽类型不为inner即当前节点将成为与目标节点同一层级的节点 //nodeDate=data.childrens,通过上面的公式data=dropNode.parent.data,因此,nodeData=dropNode.parent.data.childrens,即为目标节点的父节点的子节点，即目标节点同一层级的节点//或者//目标节点的level!=1即目标节点不是一级节点//并且拖拽类型为inner即当前节点将成为目标节的子节点，通过上面的公式//nodeDate=data.childrens,通过上面的公式data=dropNode.data,因此,nodeData=dropNode.data.childrens,即目标节点的子节点//定义要循环的节点var nodeData = dropNode.level == 1 && dropType != "inner" ? data : data.childrens;nodeData.forEach(element=>{//设置父ID,当目标节点level为1说明在第一层，父ID为空;//否则，父id为data.id//当拖拽类型不为inner时，element.parentId=data.id=dropNode.parent.data.id即目标节点的父节点的id//当拖拽类型为inner时，element.parentId=data.id=dropNode.data.id即目标节点的idelement.parentId = dropNode.level == 1 ? "" : data.id;});var pri=1nodeData.forEach((element, i) => {//当拖拽类型不为inner,为before或after时，说明只是在目前已有的层级间移动//只需要寻找目标节点的parentId，即为当前节点的parentId//         与目标节点的同一层级的节点的priority按照现在的排列顺序重新排列1++var dept = {id: element.id,parentId: element.parentId,priority:pri++,projectName:element.projectName};paramData.push(dept);});updateProject(paramData).then((res) => {console.log(res);if (res.code == '200') {this.$message({message: '更新成功',type: 'success'});paramData={}}else{this.$message({message: '更新失败',type: 'error'});}})},

看到上面的注释太多可能容易让人不想看，觉得太复杂，小编整理了一个思维导图的形式：

总结：不要给自己设限，不要在没有做一件事之前做假设，干就完了！！！

【el-tree】树形结构拖拽相关推荐

Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...
使用ztree.js，受益一生，十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
树形可拖拽排序配置组件
效果使用场景 vue2下自定义表格表头配置: 列排序,显示/隐藏等.确保表头以配置项的形式加载,这样表格才能对修改后的配置作响应思路 1.表格使用render函数加载(如有疑问可私信),通过类似如 ...
java 树结构_Java通用tree树形结构
前言现在大部分都是后端封装树形结构,第一次做的时候想从网上找通用,发现大部分都是要用类的get/set方法,不一样就要改,毕竟懒,改就改改,后来发现部门要,地区要,分类要,于是想着就把之前的用注解和 ...
easyu tree节点的拖拽(1)
<div id="treediv"> <ul id='tt'></ul> </div> <script> var tre ...
把数据转换为在内存中Tree(树形结构)。_备战秋招：一文搞定数据库常见面试题...
点击上方"蓝字",关注了解更多 1.数据库范式第一范式:列不可分,eg:[联系人](姓名,性别,电话),一个联系人有家庭电话和公司电话,那么这种表结构设计就没有达到 1NF: 第 ...
关于element tree树形结构设置默认展开第一级，第二级，第三级，以此类推
官方default-expand-all是否默认展开所有节点,这个在这里已经不够用了. 第一步:设置node-key属性,每个树节点用来作为唯一标识的属性,整棵树应该是唯一的.例如:node-key= ...
XML Tree(树形结构）
xml文档(xml document)使用树形结构表达,以根结点root为开始,逐渐向下发散.它使用一种可自我描述的简单的语法. 一个xml文档分为文件序言(declaration)和文件主体两个大的 ...
EasyUI之Tree树形结构(一)
官网地址:www.jeasyui.net/plugins/186- 前端代码: $("#menuTreegrid").treegrid({url: SysResource.URL. ...

【el-tree】树形结构拖拽

【el-tree】树形结构拖拽相关推荐

最新文章

热门文章