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排序 保存
