el-tree拖拽事件,限制同级拖拽,获取拖拽后节点的前后节点,同级拖拽合并父节点name且子节点加入目标节点里
node-drag-start
:开始拖拽节点时触发(按下鼠标按钮),无论是否允许放置,此事件都会触发。
allow-drop
返回 true 才能触发@node-drag-end="handleDragend"、@node-drop="handleDrop"
;
(1)allow-drop:动态控制是否允许放置;
(2)node-drag-end:拖拽结束时(可能未成功)触发的事件;
(3)node-drop:拖拽成功完成时触发的事件,触发处理数据更新;
node-drag-end与node-drop无法通过返回值阻止拖拽操作
// ❌ 错误:此时数据尚未更新!
handleDragEnd() {this.treeData = newData; // ❌ 不会生效
}// ✅ 正确:在 @node-drop 中更新数据
handleDrop() {this.treeData = newData; // ✅ 触发响应式更新
}
<template><!-- 两棵el-tree的节点跨树拖拽实现 --><div class="tree-drag"><!-- 左侧树(可拖出) --><el-tree:data="treeData1"ref="tree1"class="tree" node-key="id"draggabledefault-expand-all:props="defaultProps"@node-drop="handleDrop":allow-drop="returnTrue"></el-tree><!-- 右侧树(可拖入) --><el-tree:data="treeData2" ref="tree2"class="tree" node-key="id"draggabledefault-expand-all:allow-drop