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 项目时，良好的目录结构…...
FPGA与CPLD在数字机顶盒中的关键技术应用
1. 可编程逻辑器件在数字机顶盒中的核心价值 数字机顶盒作为连接广播网络与终端显示设备的关键枢纽，其设计面临三大核心挑战：多标准兼容性、快速功能迭代和成本控制。Xilinx Spartan系列FPGA和CoolRunner CPLD通过硬件可重构特性，为这些挑战提…...
保姆级教程：在Ubuntu 20.04上用YOLOv5 v6.2训练你自己的COCO数据集（附完整数据准备流程）
在Ubuntu 20.04上从零构建YOLOv5 v6.2自定义训练环境的完整指南 当你想在本地工作站或云服务器上训练自己的目标检测模型时，YOLOv5无疑是最受欢迎的选择之一。但许多教程都假设你已经熟悉了Linux环境配置、数据集处理等前置知识，这让不少初学者在第一步…...
GPU加速向量搜索实战：基于cuvs实现Faiss性能飞跃与大规模向量检索
1. 项目概述：当传统CPU计算成为瓶颈，我们如何加速向量搜索？ 如果你最近在折腾大模型应用、推荐系统或者图像检索，大概率会碰到一个绕不开的核心问题：向量相似性搜索。简单来说，就是把文本、图片、音频这些非…...
Win10/Win11网络适配器‘罢工’终极排查指南：从驱动、服务到协议栈的完整修复流程
Win10/Win11网络适配器深度修复指南：从驱动到协议栈的全面诊断 当你的Windows设备突然无法联网，只剩下孤零零的飞行模式图标时，那种焦虑感每个IT从业者都深有体会。上周我的主力开发机就遭遇了这样的"罢工"事件——所有网络连接突然…...
告别覆盖烦恼：手把手教你让OpenLayers专题图在Cesium三维地球中持续显示
告别覆盖烦恼：手把手教你让OpenLayers专题图在Cesium三维地球中持续显示 当二维地图与三维地球在同一个应用中切换时，最令人头疼的问题莫过于精心设计的专题图层突然消失。这种割裂体验不仅影响用户操作流畅性，更可能导致关键业务信息丢失。本…...
构建企业级日志监控：免费Syslog服务器部署方案
构建企业级日志监控：免费Syslog服务器部署方案 【免费下载链接】visualsyslog Syslog Server for Windows with a graphical user interface 项目地址: https://gitcode.com/gh_mirrors/vi/visualsyslog 在分布式系统架构中，网络设备、服务器和应…...
告别黑盒：手把手教你用S-Function在Simulink里打造自己的16QAM调制解调模块
从零构建16QAM通信链路：Simulink S-Function深度开发指南 在通信系统仿真领域，现成模块虽然方便，却常常成为深入理解底层原理的障碍。当我们需要验证特定算法、优化系统性能或进行教学演示时，自主构建核心模块的能力显得尤为重要…...
鸿蒙一气总论（六）
第六卷 本心人道心性人性一气真解卷首引天地立、万象生、文明兴、文字成， 天地大道在外，人心大道在内。天有天象，地有地理，物有物性， 人有人心，心有人性，神有灵机。全书十六字铁律： …...
Chopstick工具：高效管理多Git仓库的批量操作与自动化实践
1. 项目概述与核心价值 最近在GitHub上看到一个挺有意思的项目，叫 chopstick ，作者是DustinMeyer1010。光看名字你可能会联想到筷子，但它的实际功能跟餐具可没半点关系。这是一个专门用于 代码仓库（Repository）克隆…...
别再死记硬背了！手把手带你用Vivado SDK调试ZYNQ FSBL源码（附常见启动失败排查）
深入实战：用Vivado SDK调试ZYNQ FSBL源码的完整指南 在嵌入式系统开发中，理解启动流程是掌握整个系统运行机制的关键。对于Xilinx ZYNQ平台而言，First Stage Boot Loader（FSBL）作为系统启动的第一环，其重要…...