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

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

相关文章:

el-tree拖拽事件,限制同级拖拽,获取拖拽后节点的前后节点,同级拖拽合并父节点name且子节点加入目标节点里

node-drag-start:开始拖拽节点时触发​​(按下鼠标按钮),无论是否允许放置,此事件都会触发。 allow-drop 返回 true 才能触发@node-drag-end="handleDragend"、@node-drop="handleDrop"; (1)allow-drop:动态控制​​是否允许放置; (2)node-dr…...

day62—DFS—太平洋大西洋水流问题(LeetCode-417)

题目描述 有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights &#xff0c; hei…...

《Python基础》第2期:环境搭建

在开始编写 Python 代码前&#xff0c;还需要搭建 Python 的开发环境。 电脑是没办法直接读懂 Python 代码的&#xff0c;而是需要一个解释器&#xff0c;实时把代码翻译成字节码&#xff0c;字节码再转换成 0 和 1&#xff0c;电脑就能读懂了。 Python 的运行过程就是翻译一行…...

WSL 安装 Debian 12 后,Linux 如何安装 curl , quickjs ?

在 WSL 的 Debian 12 系统中安装 curl 非常简单&#xff0c;你可以直接使用 APT 包管理器从官方仓库安装。以下是详细步骤&#xff1a; 1. 更新软件包索引 首先确保系统的包索引是最新的&#xff1a; sudo apt update2. 安装 curl 执行以下命令安装 curl&#xff1a; sudo…...

[CSS3]vw/vh移动适配

vw/vh 目标: 能够使用vw单位设置网页元素的尺寸 相对单位相对视口的尺寸计算结果.vw全称viewport width; 1vw1/100视口宽度 vh全称viewport height; 1vh1/100视口高度 体验vw和vh单位 <!DOCTYPE html> <html lang"en"> <head><meta charset…...

Python进阶与常用库:探索高效编程的奥秘

一、文件与目录操作&#xff1a;os模块 os模块是Python标准库中用于与操作系统交互的核心工具&#xff0c;提供了丰富的文件和目录操作方法。通过os&#xff0c;开发者可以轻松实现文件路径处理、环境变量获取、目录管理等功能。 1.1 核心功能与方法 以下是os模块中常用的方…...

nt!MiDispatchFault函数分析之nt!MiCompleteProtoPteFault函数的作用

nt!MiDispatchFault函数分析之nt!MiCompleteProtoPteFault函数的作用 第一部分&#xff1a; // // PTE is still in transition state, same protection, etc. // ASSERT (Pfn1->u4.InPageError 0); if (Pfn1->u2.ShareCount 0) { MI_REMO…...

YOLOX 的动态标签分类(如 SimOTA)与 Anchor-free 机制解析2025.5.29

YOLOX 的动态标签分类&#xff08;如 SimOTA&#xff09;与 Anchor-free 机制是其核心改进中的两个关键部分&#xff0c;它们在目标检测中的作用和实现方式存在显著差异。以下从原理、实现细节及效果三个方面进行详细对比&#xff1a; 一、核心原理与目标 1. Anchor-free 机制…...

打卡day42

DAY 42 Grad-CAM与Hook函数 知识点回顾 回调函数lambda函数hook函数的模块钩子和张量钩子Grad-CAM的示例 作业&#xff1a;理解下今天的代码即可 1、回调函数 回调函数&#xff08;Callback Function&#xff09;是一种特殊的函数&#xff0c;它作为参数传递给另一个函数&am…...

小白的进阶之路系列之八----人工智能从初步到精通pytorch综合运用的讲解第一部分

PyTorch Tensors 通过大量实例学习编程应用是最有效的方法。 本篇是PyTorch综合运用,旨在让读者通过一行行代码亲自掌握Pytorch工具包的各种功能,有利于大家部署自己的神经网络人工智能计算工程。 首先,载入torch库。 import torch我们来看看一些基本的张量操作。首先,…...

724.寻找数组的中心下标前缀和

题目链接&#xff1a; https://leetcode.cn/problems/find-pivot-index/ 这道题目我们可以使用暴力解法&#xff0c;就一个下标前数组之和&#xff0c;再求一个下标后数组之和&#xff0c;时间复杂度达到n方&#xff0c;我们来写一下&#xff1a; int pivotIndex(vector<in…...

软考-系统架构设计师-第十六章 层次式架构设计理论与实践

层次式架构设计理论与实践 16.2 表现层框架设计16.3 中间层框架设计16.4 数据访问层设计16.5 数据架构规划与设计16.6 物联网层次架构设计 软件体系结构为软件系统提供了结构、行为和属性的高级抽象&#xff0c;由构成系统的元素描述这些元素的相互作用、指导元素集成的模式以及…...

甘特图 dhtmlxGantt.js UA实例

摘要&#xff1a;本文介绍了一个基于AngularJS的排产资源占用甘特图系统&#xff0c;包含前端界面展示和后端控制逻辑。系统通过HTML模板实现甘特图展示区域、查询条件表单和数据绑定&#xff0c;使用JavaScript控制器处理数据查询、甘特图初始化和交互逻辑。主要功能包括&…...

Docker学习笔记:基础知识

本文是自己的学习笔记 1、什么是Docker2、Docker的架构设计2.1、镜像&#xff08;Image&#xff09;2.2、容器&#xff08;Container&#xff09;2.3、仓库&#xff08;Repository)2.4、Docker使用场景案例 1、什么是Docker Docker是基于Go语言实现的云开源项目。它的角色是作…...

5.2 初识Spark Streaming

在本节实战中&#xff0c;我们初步探索了Spark Streaming&#xff0c;它是Spark的流式数据处理子框架&#xff0c;具备高吞吐量、可伸缩性和强容错能力。我们了解了Spark Streaming的基本概念和运行原理&#xff0c;并通过两个案例演示了如何利用Spark Streaming实现词频统计。…...

uv:一个现代化的 Python 依赖管理工具

在 Python 的生态系统中&#xff0c;依赖管理和 Python 版本管理一直是开发者关注的核心问题。传统的工具如 pip、poetry 和 pyenv 虽然功能强大&#xff0c;但在性能和使用体验上仍有改进空间。uv 是由 Python 核心开发者开发的 现代化依赖管理工具&#xff0c;旨在提供更快、…...

Python趣学篇:交互式词云生成器(jieba + Tkinter + WordCloud等)

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、为什么要做词云&#xff1f;让文字"活"起来&#xff01;二、核心…...

理解解释器架构:原理、组成与运行机制全解析

目录 前言1. 什么是解释器架构2. 解释器的基本组成2.1 被解释执行的程序2.2 解释器引擎2.3 解释器内部状态2.4 程序执行的当前状态2.5 存储器模型 3. 解释器的工作原理3.1 解析源代码3.2 初始化运行环境3.3 逐条执行语法结构3.4 维护程序状态3.5 内存管理与变量作用域 4. 举例&…...

2025华为OD机试真题+全流程解析+备考攻略+经验分享+Java/python/JavaScript/C++/C/GO六种语言最佳实现

华为OD全流程解析&#xff0c;备考攻略 快捷目录 华为OD全流程解析&#xff0c;备考攻略一、什么是华为OD&#xff1f;二、什么是华为OD机试&#xff1f;三、华为OD面试流程四、华为OD薪资待遇及职级体系五、ABCDE卷类型及特点六、题型与考点七、机试备考策略八、薪资与转正九、…...

Python应用for循环临时变量作用域

大家好!如果你刚开始学习Python&#xff0c;可能会对for循环中临时变量的作用域感到好奇。下面通过一个简单的练习&#xff0c;帮助你理解这个概念。 代码呈现: i 0 for i in range(5):print(i)print(i)代码介绍: 首先我们初始化变量i 0然后进入for循环&#xff0c;这里i成为…...

设计模式——桥接设计模式(结构型)

摘要 桥接设计模式是一种结构型设计模式&#xff0c;用于将抽象与实现解耦&#xff0c;使二者可以独立变化。它通过将一个类拆分为“抽象”和“实现”两部分&#xff0c;并通过桥接关系组合&#xff0c;避免了类继承层次结构过于庞大。桥接模式包含抽象类、扩充抽象类、实现类…...

LLaDa——基于 Diffusion 的大语言模型 打平 LLama 3

这里分享一篇文章《Large Language Diffusion Models》&#xff0c;来自人民大学高领人工智能学院&#xff0c;一篇尝试改变传统自回归范&#xff08;预测下一个token&#xff09; LLM 架构&#xff0c;探索扩散模型在 LLM 上的作用&#xff0c;通过随机掩码-预测逆向思维&…...

Apache SeaTunnel部署技术详解:模式选择、技巧与最佳实践

Apache SeaTunnel&#xff08;原Waterdrop&#xff09;作为高性能、分布式数据集成平台&#xff0c;支持海量数据的离线与实时同步。其灵活多样的部署模式可适配不同规模的生产环境需求。本文将系统解析SeaTunnel的部署架构、技术要点及最佳实践&#xff0c;帮助用户高效构建稳…...

2. 数据结构基本概念 (2)

本文部分ppt、视频截图来自&#xff1a;[青岛大学-王卓老师的个人空间-王卓老师个人主页-哔哩哔哩视频] 1. 数据结构基本概念 1.1 数据类型和抽象数据类型 (1) 数据类型(Data Type) 概念 数据类型是一组性质相同的值的集合以及定义于这个值集合上的一组操作的总称。 在使用…...

鸿蒙5.0+ 多协议设备发现与分布式软总线技术实践

一、技术演进与架构升级 1.1 多协议发现机制演进 鸿蒙5.0重构设备发现层&#xff0c;支持​​三模异构发现​​&#xff1a; ​​经典蓝牙​​&#xff08;BLE 5.2&#xff09;&#xff1a;低功耗设备发现​​Wi-Fi Aware​​&#xff1a;高带宽设备预连接​​PLC&#xff0…...

STM32F407寄存器操作(多通道单ADC+DMA)

1.前言 又是半年没更新了&#xff0c;趁着端午放假有点时间&#xff0c;并且最近项目要用这块知识&#xff0c;我就顺带研究一下ADC吧。 一般来说ADC主要用法包含了1.单通道软件触发&#xff08;这是最简单和最常用的用法&#xff09;2.单通道多次采集&#xff08;需要快速采…...

基于React和TypeScript的金融市场模拟器开发与模式分析

基于React和TypeScript的金融市场模拟器开发与模式分析 项目概述 本项目开发了一个基于React和TypeScript的金融市场模拟器&#xff0c;通过模拟订单流和价格发现机制&#xff0c;重现了真实市场的动态特性。该模拟器不仅提供了实时价格图表、订单簿和交易功能&#xff0c;还…...

剑指offer13_剪绳子

剪绳子 给你一根长度为 n 绳子&#xff0c;请把绳子剪成 m 段&#xff08;m、n都是整数&#xff0c;2≤n≤58 并且 m≥2&#xff09;。 每段的绳子的长度记为 k[1]、k[2]、……、k[m]。 k[1]k[2]…k[m] 可能的最大乘积是多少&#xff1f; 例如当绳子的长度是 8 时&#xff0…...

reverse_ssh 建立反向 SSH 连接指南 混淆AV [好东西哟]

目录 &#x1f310; 工具简介 ⚙️ 前提条件 攻击主机 (Linux) 目标主机 (Windows) &#x1f4cb; 详细步骤 步骤 1&#xff1a;安装 Go 环境 步骤 2&#xff1a;安装必要依赖 步骤 3&#xff1a;下载并编译 reverse_ssh 步骤 4&#xff1a;配置密钥 步骤 5&#xff…...

vue+elementUi+axios实现分页(MyBatis、Servlet)

vueelementUiaxios实现分页 文章目录 vueelementUiaxios实现分页1.代码实现【HTML】**【Servlet层】****【Service层】****【Dao层】** 2.总结步骤3.实现要点4.注意事项4.注意事项 注&#xff1a;此项目 前端为 html、 后端采用 mybatis、servlet实现 1.代码实现 【HTML】…...