<el-tree
:data="rootNodeData"
class="catalogTree"
ref="catalogTree"
highlight-current
node-key="id"
:props="{ label: 'label', children: 'children', isLeaf : 'isLeaf' }"
:expand-on-click-node="false"
@node-click="treeNodeClick"
lazy
:load="treeLoadNode"
draggable
:allow-drag="allowDrag"
:allow-drop="allowDrop"
@node-drag-start="handleDragStart"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop">
</el-tree>
/**
* 判断节点能否被拖拽
* @param draggingNode 被拖拽节点对应的 Node
*/
allowDrag(draggingNode){
let flag = false;
this.$emit('allowDrag', draggingNode, val => {
flag = val;
});
return flag;
},
/**
* 拖拽时判定目标节点能否被放置
* @param draggingNode 被拖拽节点对应的 Node
* @param dropNode 目标节点对应的 Node
* @param type 被拖拽的节点放置在目标节点的位置:('prev'、'inner' 和 'next')分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
*/
allowDrop(draggingNode, dropNode, dropType){
let flag = false;
this.$emit('allowDrop', draggingNode, dropNode, dropType, val => {
flag = val;
});
return flag;
},
/**
* 节点开始拖拽时触发的事件
* @param node 被拖拽节点对应的 Node
* @param event event 对象
*/
handleDragStart(draggingNode, event){
this.$emit('handleDragStart', draggingNode, event);
},
/**
* 在拖拽节点时触发的事件(类似浏览器的 mouseover 事件)
* @param draggingNode 被拖拽节点对应的 Node
* @param dropNode 目标节点对应的 Node
* @param event event 对象
*/
handleDragOver(draggingNode, dropNode, event){
this.$emit('handleDragOver', draggingNode, dropNode, event);
},
/**
* 拖拽结束时(可能未成功)触发的事件
* @param draggingNode 被拖拽节点对应的 Node
* @param dropNode 目标节点对应的 Node
* @param dropType 被拖拽的节点放置在目标节点的位置:('before'、'inner' 和 'after')分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
* @param event event 对象
*/
handleDragEnd(draggingNode, dropNode, dropType, event){
this.$emit('handleDragEnd', draggingNode, dropNode, dropType, event);
},
/**
* 拖拽成功完成时触发的事件
* @param draggingNode 被拖拽节点对应的 Node
* @param dropNode 目标节点对应的 Node
* @param dropType 被拖拽的节点放置在目标节点的位置:('before'、'inner' 和 'after')分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
* @param event event 对象
*/
handleDrop(draggingNode, dropNode, dropType, event){
this.$emit('nodeDrop', draggingNode, dropNode, dropType, event);
},
网友评论