Element Tree 节点拖拽

实现节点拖拽，一级不允许进入二级，整体拖拽排序

 

html：

 1 <el-tree :data="classifyList" node-key="id"  highlight-current :allow-drop="collapse" @node-drop="sort" draggable  >
 2                     <span class="custom-tree-node" slot-scope="{ node, data }">
 3                             <span class="custom-tree-node-name">{{ node.label }}</span>
 4                             <span>
 5                                 <el-button type="text" size="mini" @click="$router.push({name:'goodsClassifySecondlist',params:{id:node.data.id,name:node.data.name}});">
 6                                     查看二级分类
 7                                 </el-button>
 8                                 <el-button type="text" size="mini" @click="updateFirst=true;updateNode = node.data;">
 9                                     编辑
10                                 </el-button>
11                                 <el-button type="text" size="mini" @click="stick(node.data.id)">
12                                     置顶
13                                 </el-button>
14                                 <el-button style="color:#EE6D34" type="text" size="mini" @click="deleteFirst=true;deleteId = node.data.id;">
15                                     删除
16                                 </el-button>
17                             </span>
18                     </span>
19                 </el-tree>

 1 // 分类排序
 2             collapse(moveNode,inNode,type){
 3                 if(moveNode.level==1&&inNode.level==1){
 4                     // 四种情况
 5                     if(moveNode.nextSibling==undefined){
 6                         return type == 'prev';
 7                     }else if(inNode.nextSibling==undefined){
 8                         return type == 'next';
 9                     }else if(moveNode.nextSibling.id !== inNode.id){
10                         return type == 'prev';
11                     }else{
12                         return type == 'next';
13                     }
14                 }
15                 //是否为同级下的子节点
16                 if(moveNode.level==2&&inNode.level==2&&moveNode.parent.id == inNode.parent.id){
17                     // 四种情况
18                     if(moveNode.nextSibling==undefined){
19                         return type == 'prev';
20                     }else if(inNode.nextSibling==undefined){
21                         return type == 'next';
22                     }else if(moveNode.nextSibling.id !== inNode.id){
23                         return type == 'prev';
24                     }else{
25                         return type == 'next';
26                     }
27                 }
28             },

　　　　拖拽完成 触发sort排序 保存

 

 

转载于:https://www.cnblogs.com/why-live/p/9983855.html