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 项目时，良好的目录结构…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
反射获取方法和属性
Java反射获取方法 在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
IP如何挑？2025年海外专线IP如何购买？
你花了时间和预算买了IP，结果IP质量不佳，项目效率低下不说，还可能带来莫名的网络问题，是不是太闹心了？尤其是在面对海外专线IP时，到底怎么才能买到适合自己的呢？所以，挑IP绝对是个技…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...