当前位置: 首页 > news >正文

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

相关文章:

  • 【华为云物联网】如何实现在 MQTT.fx 上模拟数据间隔上传一次,并按设定系数变动数据
  • 打造AI智能旅行规划器:基于LLM和Crew AI的Agent实践
  • python和java差异:关键数据类型与容器
  • PaddleNLP 的文本分类项目
  • Cmake4编译PaddleOCR3.0成功步骤
  • 分块查找详解
  • yolo最终笔记
  • 【node】Express创建服务器
  • 使用新一代达梦管理工具SQLark,高效处理 JSON/XML 数据!
  • linux快速入门-VMware安装linux,配置静态ip,使用服务器连接工具连接,快照和克隆以及修改相关配置信息
  • 通用前端框架项目静态部署到Hugging Face Space的实践指南
  • 2025.5.27学习日记 linux三剑客 sed与正则表达式
  • IEEE出版|2025人工智能驱动图像处理与计算机视觉技术国际学术研讨会 (AIPCVT 2025)
  • 自动生成提示技术突破:AUTOPROMPT重塑语言模型应用
  • Cesium添加点、线、面
  • threejs顶点UV坐标、纹理贴图
  • 三、web安全-信息收集
  • python 生成复杂表格,自动分页等功能
  • 【北京盈达科技】GEO优化:引领AI时代内容霸权,重塑行业生态
  • 【Redis】Redis使用规范
  • 互联网网站建设 选择题/seo刷网站
  • 衢州高级网站设计/seo企业优化顾问
  • wordpress加载速度太慢/长沙seo网站排名优化公司
  • 网站开发后需要交接哪些材料/武汉大学人民医院精神卫生中心
  • 互联网运营公司排行榜/北京企业网站seo平台
  • HS酒店网站建设/百度 营销推广是做什么的