Element UI Tree 实现父节点内节点拖拽

た入场券 2023-01-15 03:51 340阅读 0赞

由于代码量过大，我这里进行部分代码粘贴 可以好好研究官方文档的api，很有价值  
[官方api][api]

<el-tree :data="treeData" ref="tree" :key="tree_key" node-key="id" class="margin-top10" @node-click="nodeClick" :filter-node-method="filterNode" :default-expanded-keys="defaultExpand" empty-text="选定系统没有组织结构" :render-content="renderContent" draggable :allow-drop="allowDrop" @node-drop="sort" ></el-tree>

:allow-drop 开始拖拽  
@node-drop 拖拽结束时的操作，包括 拖动的节点，结束时的节点，位置，event

> 我的数据在查询时都是安装sort字段进行排序，直接更改sort字段值即可。  
> 若不存在排序字段，参考思路：将当前父节点下的所有新的排列好的数组更新到原来的数据库中，进行覆盖操作，也可以做一个批量修改，将当前拖拽的两个节点进行交换。

//节点拖拽 
        allowDrop(draggingNode, dropNode, type){ 
              //非组织结点拖拽处理
              if (draggingNode.data.type  === 1) { 
                return false
              }
              //同一父节点下实现拖拽
              if (draggingNode.data.parentId === dropNode.data.parentId) { 
                return type === 'prev' || type === 'next'
              } else { 
                // 不同父节点处理
                return false
              }
        },
        //更新节点位置
        sort(draggingNode,dropNode,type,event) { 
              draggingNode = draggingNode.data;
              dropNode = dropNode.data;
              // console.log("draggingNode",draggingNode)
              // console.log("dropNode",dropNode)
              // console.log("type",type)
              //拖拽至节点上方
              if (type === 'after') { 
                //当前结点已经为最低
                if (draggingNode.sort === 1) { 
                  return ;
                }
                let params = { 
                  id :draggingNode.id,
                  sort : dropNode.sort - 1,
                };
                //sysOrgUpdate 为服务端接口
                sysOrgUpdate(params).then(res => { 
                  let _this = this;
                  if (res.code === 200) { 
                    _this.$message({ 
                      type: "success",
                      message: "节点位置更新成功",
                  });
                  } else { 
                    _this.$message({ 
                      type: "error",
                      message: res.message,
                      });    
                  }
                });
              }
              //拖拽至节点下方
              if (type === 'before') { 
                //修改移动结点的sort为dropNode结点 sort+1
                let params = { 
                  id :draggingNode.id,
                  sort : dropNode.sort + 1,
                };
                sysOrgUpdate(params).then(res => { 
                    let _this = this;
                  if (res.code === 200) { 
                    _this.$message({ 
                      type: "success",
                      message: "节点位置更新成功",
                  });
                  } else { 
                    _this.$message({ 
                      type: "error",
                      message: res.message,
                      });    
                  }
                });
              }
              
        },

[api]: https://element.eleme.cn/#/zh-CN/component/tree