最近整理了旧版ztree系，详见zTree通用拖拽排序。想着新版的el-tree加入排序功能，毕竟，碗里的水应该是平的（功能都是自己写的。。。),因为两个表结构相似，核心仍然是id、pid、order这几个字段。刚刚看了ElementUI官网的文档，有这么一篇文章。原则上，数据越少越好。首先，我们的vue文件声明如下（由于文件内容较多，只贴出关键代码），主要是添加draggable属性和node-drop事件，支持拖拽在vue挂载中添加handleDrop方法。多次分析draggNode和dropNode的数据结构，发现ztree的不同el-tree的规则和层级规则与ztree不同。ztree肉眼可见的第一层的level为0，1ztree第一层的penart对于el-tree为null。它会自动更改节点的pId和parentTid。这是ztree本身的属性，不是我们自己的pid。拖拽完成后我们自己的pid会保持不变。原来的父节点还是原来的父节点（仔细看pId和pid是有区别的）具体实现如下，具体实现思路在注释中注明：//drag事件的参数为：被拖动节点对应的Node，拖动结束时进入的最后一个节点，以及被拖动的Node放置位置（before,after,inner），eventhandleDrop:asyncfunction(draggingNode,dropNode,dropType,ev){varparamData=[];//当拖动类型不是inner时，表示只进行同级或跨级排序，只需要找到目标节点的父ID，得到它的对象和所有子节点，并将当前对象的ID设置为子节点的父ID。//当拖动类型为inner时，表示拖动节点已经成为目标节点的子节点，只需要获取目标节点对象vardata=dropType!="inner"?dropNode.parent.data:dropNode.data;varnodeData=dropNode.level==1&&dropType!="inner"？数据：data.children；//设置parentID，当level为1时表示在第一层，pid为空nodeData.forEach(element=>{element.pid=dropNode.level==1?"":data.id;});nodeData.forEach((element,i)=>{vardept={deptId:element.id,parentDeptId:element.pid,order:i};paramData.push(dept);});this.loading=true;//获取本次操作需要改变的数据范围，请求后台批处理...DeptAPI.updateDeptTreeOrder(JSON.stringify(paramData)).then(res=>{console.log(res);//自己的逻辑，可以加个提示框消息this.loading=false;});},postDeptAPI也是，就是我引入的dept.js文件/***Departmentsorting*@param{*}data*/constupdateDeptTreeOrder=data=>{returnrequest({url:'...',method:"POST",headers:{'Content-Type':'application/json;charset=UTF-8'},data:数据})}exportdefault{updateDeptTreeOrder};后端Controller层使用@RequestBody接收List对象。具体可以参考文章SpringBoot接收List参数问题（POST请求方式）注意需要设置axios的Content-Type为application/json;charset=UTF-8下次见
