el-tree树的拖拽排序
主要加入了
draggable
属性和node-drop
事件,使el-tree
支持拖拽,添加allow-drop
判定拖拽时目标节点能否被放置
// el-tree拖拽
function handleDrop(draggingNode:any,dropNode:any,dropType:string,evt:any) {
// console.log(draggingNode,'draggingNode被拖拽节点')
// console.log(dropNode,'dropNode结束推拽最后进入的节点')
// console.log(dropType,'dropType放置的位置')
// console.log(evt,'evt')
// console.log(dropNode.level,'dropNode.level')
let paramsData = [] as any;
let data = dropType != "inner" ? dropNode.parent.data:dropNode.data;
// 要循环的节点
var nodeData = dropNode.level == 1 && dropType != "inner" ?data:data.children;
nodeData.forEach((element:{parentId: string})=>{
element.parentId = dropNode.level == 1&& dropType != "inner" ? "0" :data.templateId;
})
nodeData.forEach((element:{ templateId: string, parentId: string}, i: number)=>{
let dept = {
templateId:element.templateId,
parentNodeId:element.parentId,
nodeRank:i,
// name:element.titleName
}
paramsData.push(dept)
})
updateTemplateNodeBatchApi(paramsData).then(()=>{
// console.log(res,'res')
})
}
// 允许拖拽的节点
function allowDrop(draggingNode:any,dropNode:any,type:any) {
// 不允许文件中移入结点
if(type == 'inner' && dropNode.data.nodeType != '1') {
return false;
}else {
return true;
}
}