【el-tree】树形结构拖拽

- 日理万妓 2022-09-11 10:20 466阅读 0赞

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

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

<el-tree
        v-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
      >

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54G15rS755qE5bCP6IOWemhp_size_20_color_FFFFFF_t_70_g_se_x_16][]

前端拖拽一个属性就搞定了，so easy，接下来就是让人头疼的地方了，前端拖拽之后我们需要持久化到数据库呀，不然拖拽只是前端的一个动画效果而已。为什么说是让人头疼的地方呢，因为当时考虑了好多好多种情况，整个人脑子都要炸了，感激这位网友的这篇博客真的是救了我一命[=ElementUI El-Tree 任意拖拽排序方法，最小粒度数据变更范围（通用排序）\_小狐狸和小兔子-CSDN博客\_eltree拖拽排序实现思路][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即目标节点的id
            element.parentId = dropNode.level == 1 ? "" : data.id;
          });
    
            var pri=1
            nodeData.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'
                  });
            }
          })
        },

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54G15rS755qE5bCP6IOWemhp_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54G15rS755qE5bCP6IOWemhp_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/7f9c87ce249f4404a52913d5e408785e.png
[ElementUI El-Tree _-CSDN_eltree]: https://blog.csdn.net/qq_27331631/article/details/107486812
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54G15rS755qE5bCP6IOWemhp_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/04476b0a173b4e6db7a01b74e5a8cde4.png