有时候我们需要对elementui 树形控件实现动态排序,所以需要进行拖拽操作,那么为了不影响节点数的层级关系,就需要仅仅只能在同级之间来拖拽。
代码如下:
<el-tree
class="leftTree"
:draggable="true"
:allow-drop="allowDrop"
@node-drop="sort"
</el-tree>
allowDrop(draggingNode, dropNode, type) {
console.log(draggingNode, dropNode);
if (draggingNode.data.level === dropNode.data.level) {
//aboveId是父节点id
if (draggingNode.parent.id === dropNode.parent.id) {
return type === "prev" || type === "next";
}
} else {
// 不同级进行处理
return false;
}
},
sort(draggingNode, dropNode, type, event) {
/* console.log('排序')
console.log(dropNode) //dropNode.parent.childNodes =[] 拖拽之后的重新组合的数组 */
debugger;
let obj = {
aboveId: "",
arr: []
};
obj.aboveId = dropNode.parent.id;
// for (let item of dropNode.parent.childNodes) {
// obj.arr.push(item.data.id);
// }
//this.updateOrderMe(obj);
},
updateOrderMe(obj) {
this.$http.post("url", { aboveId: obj.aboveId, ids: obj.arr }).then(res => {
if (!res.data.success) {
this.$message.warning(res.data.msg);
}
});
},