Vue3自研开源Tree组件：人性化的拖拽API设计
针对Element Plus Tree组件拖拽功能API用的麻烦，小卷开发了一个API使用简单的JuanTree组件。拖拽功能用起来非常简单！
文章目录
- 使用示例
- allowDrag
- allowDrop
- 支持节点勾选
- 支持dirty检测
- 后台API交互
- 源码实现
使用示例
组件的使用很简单：
通过ref引用tree组件，可操作其expose出来的方法，比如，保存节点操作（新增、删除和重命名节点）的变更、新增一级节点：
通过v-model绑定勾选项，data属性绑定初始化树形结构的嵌套数据，option-props用于绑定组件的选项：
allowDrop方法，用来让用户控制哪些节点不允许drop操作；当然哪些节点不允许drag也可以由相应的方法来控制，比如下面的逻辑控制：
allowDrag
比如44这个节点无法拖动：
allowDrop
演示拖拽drop的限制，Java Web节点不能释放在a11或a22节点上，超过了5级限制。
支持节点勾选
在拖拽完成后，节点的勾选状态能保证一致性
支持dirty检测
在编辑节点的情况下，要先保存变更才能继续拖拽
后台API交互
提供了便捷的拖拽回调接口
这里给用户进行拖拽的后台API提供了必要的参数，如果参数不够可以后期再扩展，同时提供了回调的done函数，调用了done()才更新拖拽后的节点，非常的人性化！
源码实现
见后续会员教程分享
相关文章：
Vue3自研开源Tree组件：人性化的拖拽API设计
针对Element Plus Tree组件拖拽功能API用的麻烦，小卷开发了一个API使用简单的JuanTree组件。拖拽功能用起来非常简单！ 文章目录 使用示例allowDragallowDrop支持节点勾选支持dirty检测后台API交互 源码实现 使用示例 组件的使用很简单： 通过…...
MYSQL--触发器详解
触发器 1.触发器简介 触发器（trigger）是一个特殊的存储过程，它的执行不是由程序调用，也不是手工启动，而是由事件来触发，比如当对一个表进行操作（ insert，delete， update…...
C++实用指南：Lambda 表达式的妙用
Lambda 表达式的灵活性和强大功能确实为编程提供了许多便利。但是我们发现许多开发者仍然无法灵活运用其便利，于是写了这篇文章。 Lambda 允许我们编写更简洁和灵活的代码。例如在处理网络请求时，我们经常需要确保响应与当前的状态或需求仍然相关。通过…...
FastAPI（七十八）实战开发《在线课程学习系统》接口开发-- 评论
源码见："fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 梳理下思路 1.判断是否登录 2.课程是否存在 3.如果是回复，查看回复是否存在 4.是否有权限 5.发起评论 首先新增pydantic模型 class Cour…...
基于springboot+vue+uniapp的居民健康监测小程序
开发语言：Java框架：springbootuniappJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7（一定要5.7版本）数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包&#…...
TypeScript基础【学习笔记】
一、TypeScript 开发环境搭建 下载并安装 Node.js使用 npm 全局安装 typescript 进入命令行输入：npm i -g typescript 创建一个 ts 文件使用 tsc 对 ts 文件进行编译 进入命令行进入 ts 文件所在目录执行命令：tsc xxx.ts 二、基本类型 类型声明 通过类型…...
树莓派物联网服务器搭建流程：集成 Node.js、InfluxDB、Grafana 和 MQTT 协议
目录 一、搭建准备 1. 硬件要求 2. 软件要求 二、技术栈概述 三、搭建步骤 1. 安装操作系统 2. 启动树莓派 3. 更新系统 4. 安装必要的软件 4.1 安装 Python 和 Flask 4.2 安装 Node.js 4.3 安装 Mosquitto（MQTT Broker） 4.4 安装 InfluxDB…...
typescript 断言
/* 断言 确定后期一定是某种格式 可用于表单大对象初始化是空，赋值时有具体字段。前期断言是会是某种格式 */interface obj {name: stringlocation: stringage?: number }// 会报错 // let data: obj { // // } let data: obj {} as obj; // 断言data会有obj里…...
期刊评价指标及其查询方法
1、期刊评价体系一 科睿唯安《期刊引证报告》（Journal Citation Reports, JCR） 科睿唯安每年发布的《期刊引证报告》（Journal Citation Reports, JCR）是一个独特的多学科期刊评价工具。JCR数据库提供基于引文数据的统计信息的期…...
巴斯勒相机(Basler) ACE2 dart 系列说明和软件
巴斯勒相机(Basler) ACE2 dart 系列说明和软件...
【Pycharm中anaconda使用介绍】
在安装好anaconda之后，首先打开anaconda界面，执行以下操作 1.查看Anaconda中当前存在的环境 conda info -e 或者 conda-env list 查看–安装–更新–删除包 conda list： conda search package_name 查询包 conda install package_name conda …...
2024下半年，前端的技术风口来了
“ 你近期有体验过哪些大模型产品呢？ 你有使用大模型API做过一些实际开发吗？ 在你日常开发中，可以与大模型相关应用结合来完成工作吗？ ” **最近，一直在和同事聊，关于前端可以用大模型干点啥ÿ…...
Spock Unit Test in Java
优质博文：IT-BLOG-CN 一、简介 Spock是一个基于Groovy语言的测试和规范框架，使得测试代码更简介，得益于JUnit Runner，Spock兼容大部分IDE和测试框架JUnit/JMock/Powermock等。基于BDD行为驱动开发，功能非常强大。提…...
:= 符号python
在 Python 3.8 及更高版本中，引入了一种新的语法特性，称为"海象运算符"（Walrus Operator），它使用 : 符号。这个运算符的主要目的是在表达式中同时进行赋值和返回赋值的值。 使用海象运算符可以在一些情况下…...
UPLOAD-LABS靶场[超详细通关教程，通关攻略]
---------------------------------------- 靶场环境： 下载链接： https://codeload.github.com/c0ny1/upload-labs/zip/refs/heads/master 使用小皮集成环境来完成这个靶场 将文件放到WWW目录下就可以进行访问 ------------------------------------…...
测试面试宝典（三十七）—— 接口测试中的加密参数如何处理？
1）先了解接口使用的加密方式(md5、rsa...) 2）检查接口测试工具是否支持这种加密方式，如果支持的话，直接使用对应功能就行了(比如Jmeter支持md5)；如果加密方式是公司内部特有的算法，可以在接口测试工具中调…...
秋招突击——7/23——百度提前批面试准备和正式面试
文章目录 引言一面准备面试预演一1、讲一下hashcode()和equals()关系2、equals()和有什么区别3、讲一下重载和重写的区别4、讲一下深拷贝、浅拷贝的区别5、讲一下Java异常的基类，运行时异常举几个例子，什么情况下会出现？6、讲一下Java中线程的…...
学习日记：数据类型2
目录 1.转义字符 2.隐式类型转换 2.1 强制类型转换 2.2 不同类型间赋值 3.运算符 表达式 3.1 算术运算符 3.2 算术运算优先级 3.3 赋值运算 3.3.1 不同类型间混合赋值 3.4 逗号运算 4.生成随机数 5. 每日一练 1.转义字符 \n 表示换行 \t …...
Django Web框架——05
文章目录 admin 后台数据库管理注册自定义模型类修改自定义模型类的展现样式模型管理器类再谈Meta类 数据表关联关系映射一对一映射一对多映射多对多映射 cookies 和 sessioncookiessessionCookies vs session admin 后台数据库管理 django 提供了比较完善的后台管理数据库的接…...
【React】项目的目录结构全面指南
文章目录 一、React 项目的基本目录结构1. node_modules2. public3. src4. App.js5. index.js6. .gitignore7. package.json8. README.md 二、React 项目的高级目录结构1. api2. hooks3. pages4. redux5. utils 三、最佳实践 在开发一个 React 项目时，良好的目录结构…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。 尤其让我…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
STM32---外部32.768K晶振（LSE）无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...
git: early EOF
macOS报错： Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...
WEB3全栈开发——面试专业技能点P7前端与链上集成
一、Next.js技术栈 ✅ 概念介绍 Next.js 是一个基于 React 的 服务端渲染（SSR）与静态网站生成（SSG） 框架，由 Vercel 开发。它简化了构建生产级 React 应用的过程，并内置了很多特性： ✅ 文件系…...