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节点不能释放在a11a22节点上,超过了5级限制。

在这里插入图片描述

支持节点勾选

在拖拽完成后,节点的勾选状态能保证一致性

在这里插入图片描述

支持dirty检测

在编辑节点的情况下,要先保存变更才能继续拖拽

在这里插入图片描述

后台API交互

提供了便捷的拖拽回调接口

在这里插入图片描述

这里给用户进行拖拽的后台API提供了必要的参数,如果参数不够可以后期再扩展,同时提供了回调的done函数,调用了done()才更新拖拽后的节点,非常的人性化!

在这里插入图片描述

源码实现

见后续会员教程分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/388037.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

4.1.2、操作系统-概述及进程管理-状态管理和前趋图

进出的组成和状态 进程是计算机中正在运行的程序的实例。它是操作系统进行资源分配和管理的基本单位,包括代码、数据和执行状态等信息。 进程的组成:进程控制块PCB(唯一标志)、程序(描述进程要做什么)、数据(存放进程执行时所需数据)。 我们电脑中的QQ影音和网易云音乐可以并…

小米手机怎么查看电池剩余容量

最近发现自己的小米11pro的待机时间越来越短了,怀疑是电池剩余容量太小了,希望测下电池剩余容量好打算是否要更换下电池。 1.抓取bug测试 首先打开拨号界面,输入*#*#284#*#*然后开始抓取日志。 等待bug报告生成完毕,然后点击就…

Git原理与用法系统总结

目录 Reference前言版本控制系统Git的诞生配置Git配置用户名和邮件配置颜色配置.gitignore文件 Git的基础用法初始化仓库克隆现有的仓库添加暂存文件提交变动到仓库比较变动查看日志Git回退Git重置暂存区 Git版本管理重新提交取消暂存撤销对文件的修改 Git分支Git分支的优势Git…

5、注册字符类设备

字符设备 cdev结构体 Linux中使用cdev结构体描述一个字符设备。结构体定义在include/linux/cdev.h 文件中, struct cdev{struct kobject kobj;struct module *owner; //所属模块const struct file_operations *ops; //文件操作结构体struct list_head lis…

《Java初阶数据结构》----5.<二叉树的概念及使用>

前言 大家好,我目前在学习java。之前也学了一段时间,但是没有发布博客。时间过的真的很快。我会利用好这个暑假,来复习之前学过的内容,并整理好之前写过的博客进行发布。如果博客中有错误或者没有读懂的地方。热烈欢迎大家在评论区…

综合点评!史上最强开源大模型Llama 3.1

在人工智能领域,开源模型一直是推动技术进步和创新的重要力量。 北美时间7月23日,Meta公司(原Facebook)宣布了一项重大突破:开源模型Llama 3.1的正式发布。这一举措预示着AI技术的又一次飞跃,Llama 3.1有望…

虚拟化数据恢复—XenServer VPS不可用如何恢复数据?

虚拟化数据恢复环境: 某品牌R720服务器,4块STAT硬盘通过H710P阵列卡组建了一组raid10磁盘阵列。服务器上部署XenServer虚拟化平台,虚拟机安装Windows Server系统,作为Web服务器使用,运行SQL Server数据库。共有2个虚拟…

【数据结构】——堆的实现与算法

目录 一、堆的实现 1.1堆数据的插入 1.2堆数据的删除 二、建堆算法 2.1向上调整建堆 2.2向下调整建堆 三、堆的应用 3.1堆排序 3.2Top—K问题 一、堆的实现 1.1堆数据的插入 插入一个数据后不再是小堆需要将新数据调整到合适的位置,所以堆的插入就是在数组…

类和对象(中 )C++

默认成员函数就是用户不显示实现,编译器会自动实现的成员函数叫做默认成员函数。一个类,我们在不写的情况下,编译器会自动实现6个默认成员函数,需要注意,最重要的是前4个,其次就是C11以后还会增加两个默认成…

onlyoffice用nginx反向代理

我对于onlyoffice的需求就是当个在线编辑器使用。在集成react的时候之前都是写的绝对路径的地址,这样在需要迁移应用的时候就造成了巨大的麻烦,所以我决定用nginx做反向代理,这样我集成的时候就不用每次都修改源码中的地址了。 一开始写的代…

昇思25天学习打卡营第XX天|基于MindSpore通过GPT实现情感分类

其实数据集和模型的其他大平台接口的,感觉不用非包在自己包里 %env HF_ENDPOINThttps://hf-mirror.com mindnlp.transformers 库中的 GPTTokenizer 类来加载和处理与GPT(生成式预训练变换器)模型兼容的分词器,并添加特殊的控制标…

Spring源码(八)--Spring实例化的策略

Spring实例化的策略有几种 ,可以看一下 InstantiationStrategy 相关的类。 UML 结构图 InstantiationStrategy的实现类有 SimpleInstantiationStrategy。 CglibSubclassingInstantiationStrategy 又继承了SimpleInstantiationStrategy。 InstantiationStrategy I…

SpringBoot通过3种方式实现AOP切面

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…

Sonar-Scanner: 静态代码分析的利器

Sonar-Scanner: 静态代码分析的利器 懂得享受生活的过程&#xff0c;人生才会更有乐趣。每个人都会遇到一些陷阱&#xff0c;每个人都有过去&#xff0c;有的甚至是失败的往事。过去的错误和耻辱只能说明过去&#xff0c;真正能代表人一生的&#xff0c;是他现在和将来的作为。…

【更新2022】省级农民专业合作社数量 无缺失 2006-2022

省级农民专业合作社数量是研究中国农村经济组织和农业社会化服务的重要数据。这些数据可以用来分析不同省份农业生产组织形式的多样性及其对农民生产、技术创新和收入增长的影响。研究者可以基于这些数据&#xff0c;探讨农民专业合作社在提升农产品质量、优化农业生产结构和推…

Transformer处理文本分类实例(Pytorch)

文章目录 Transformer处理文本分类实例参考网站我们构建一个实例问题,预测AG_NEWS的文本分类AG_NEWS数据集介绍预测目标总体思路(简述)主要流程数据预处理dataset构建(不是重点)构建词表 编写处理模型执行词嵌入位置编码(PositionalEncoding)(*核心)多层Transformer模块多头自注…

Mojo数据类型详解

Mojo 中的所有值都分配有相对应的数据类型&#xff0c;大多数类型都是由结构体定义的标称的类型。这些类型是标称的&#xff08;或“命名的”&#xff09;&#xff0c;因为类型相等性是由类型的名称而不是其结构决定的。 有一些类型未定义为结构&#xff0c;例如下面的两种情况…

百款精选的HTML5小游戏源码,你可以下载并直接运行在你的小程序或者自己的网站上

今天我带来了一份特别的礼物——百款精选的HTML5小游戏源码&#xff0c;你可以下载并直接运行在你的小程序或者自己的网站上&#xff0c;只需双击index.html即可开始。无论你是在寻找创意引流&#xff0c;还是想为你的网站增添互动性&#xff0c;这些小游戏都能帮你实现&#x…

办公必备!一键把PDF转换为PPT文件,只需这3款神器!

在当今数字化办公环境中&#xff0c;文件格式的转换已成为提高工作效率的关键因素之一。其中&#xff0c;PDF(便携式文档格式)和PPT(PowerPoint演示文稿)是两种广泛使用的文件格式。然而&#xff0c;有时我们需要将PDF文件转换为PPT格式&#xff0c;以便进行编辑或演示。 为方…

数据结构的基本概念与算法

数据结构的基本概念与算法 什么是数据&#xff1f; 数据是信息的载体&#xff0c;是描述客观事物属性的数、字符以及所有能输入到计算机中并被计算机程序识别和处理的符号的集合&#xff1b;总结来说 -> 数据就是计算机程序加工的原料&#xff1b; 数据元素、数据项&#xf…