<el-tree
:data="data"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drop="handleDrop"
draggable
:props="{label:'name',children:'children'}"
></el-tree>
拖拽开始时克隆数据
handleDragStart() {
this.copyTreeList = JSON.parse(
JSON.stringify(this.data)
);
},
拖拽完成显示弹框
handleDrop(draggingNode, dropNode, dropType, ev) {
this.$confirm(
`是否将节点移动到${dropNode.label}${
dropType == "before" ? "之前" : dropType == "after" ? "之后" : "下"
}?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(() => {
// 成功之后调用接口
// this.getTreeList(this.data, "");
this.$message({
type: "success",
message: "移动成功!"
});
})
.catch(() => {
this.data= this.copyTreeList;
this.$message({
type: "info",
message: "取消移动"
});
});
},