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 项目时，良好的目录结构…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...