Vue3开源Tree组件研发:节点勾选支持v-model

在这里插入图片描述
自研Tree组件有两个原因:1. 目前开源UI对Tree组件的用户API不太友好,2. 提升Vue3组件自研能力。

目前已实现的功能见上面思维导图。想象Tree组件的一个使用场景:后台管理员通过Tree组件来完成用户角色授权,同时支持对权限进行新增和删除等操作。这里既涉及到Tree节点的勾选操作,又涉及到节点增删。我们的研发就是同时很好的支持多个功能一起使用的情况,不能有bug,即便用户往往只启用一种功能。

自研Tree组件功能演示 - 节点勾选

用法示例

在这里插入图片描述

v-model绑定的是一个已选中节点backId数组。显然这里的节点我们只考虑叶子节点,也就是最外层的节点。id为后台模型的id。用户操作勾选,v-model的数据模型会自动更新。

功能演示

v-model初始值

在这里插入图片描述

v-model初始绑定的数组,会让视图完成默认的勾选。

勾选和反选

用户勾选后,v-model同步更新,绑定的数据为选中的叶子节点的backId

在这里插入图片描述

删除节点

叶子节点删除时,v-model也会相应的更新:

在这里插入图片描述

支持删除父节点的情况下,v-model同样会一致更新。

在这里插入图片描述

新增节点下的勾选控制

新增一个节点后,该节点在没有保存时,不能被选中(本身不能被点击,同时外层父节点勾选,也不能级联选中它),只有保存从后台同步了backId才能勾选噢~

在这里插入图片描述

在这里插入图片描述

对已勾选的叶节点执行新增

可以看到原来存在于v-model中的绑定项也会被移除,因为它已变成父节点。

在这里插入图片描述

源码实现

见后续补充教程。

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

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

相关文章

Spring中使用到的设计模式及其源码分析

前言 众所周知,Spring框架是一个强大而灵活的开发框架。这不,上次的面试刚问到这些,没防住!!!因此下来总结一下。这篇文章主要介绍Spring中使用到的设计模式,自己做个面试复盘,同时…

Spring Security 原理

Spring Security是一个功能强大且广泛使用的身份验证和授权框架,专为保护Java应用程序的安全性而设计。它提供了一套可配置的安全性规则和机制,用于对应用程序的资源进行访问控制和保护。以下是Spring Security的主要原理: 1. 过滤器链&…

富格林:防范虚假可信投资经验

富格林指出,现货黄金投资作为一种全球性的金融衍生品交易,吸引了无数投资者的目光。它不仅具备避险属性,还是资产配置中不可或缺的一部分。然而,要想在市场中防范虚假陷阱,投资者必须要掌握并且利用可信的投资经验。下…

引领安全新风尚:WT2605/WT2003H芯片方案赋能电动汽车,打造智能低速安全报警器"

电动汽车低速报警器(AVAS)方案可采用WT2605或WT2003H方案芯片,可实现当车辆时速低于设定值(如20Km/h),报警器会发出类似发动机加速减速的声音,倒档时装置也会发出倒车警示,在嘈杂的城市环境中帮助提升行人对驶近的电动汽车的感知,降低行人、骑行者和弱势群体面临的风险。 WT26…

十分钟带你入门Go语言(Golang)开发

概述 Go语言是由 Google 的 Robert Griesemer,Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。Go语言的设计目标是将静态语言的安全性和性能与动态语言的易用性相结合。Go语言在语言层面提供了对协程的支持,特别适合编写高并发的项目。随着使用Go语言…

基于opencv的答题卡识别

文章目录 一、背景需求二、处理步骤图片预处理检测到答题卡轮廓透视变换找每个圆圈的轮廓轮廓排序判断是否答题正确 一、背景需求 传统的手动评分方法耗时且容易出错,自动化评分可以可以显著提高评分过程的速度和准确性、减少人工成本。 答题卡图片处理效果如下&am…

想出国?去外企?建议网工无脑冲思科认证。

近年来,国内职场竞争愈发激烈,内卷现象严重,大部分人都面临着巨大的就业压力,或是找工作无门、或是中年危机悄然来临,时刻担心被职场优化。 在这样的背景下,出国或进入外企工作,成为了许多人寻…

项目中使用多线程

项目中使用多线程 线程池 1、线程池配置 项目中如果要使用线程池,必须先进行配置,如果使用spring 默认的线程池配置可能会导致OOM异常 注意要在spring启动项 上加上EnableAsync 开启异步支持线程池要配置Configuration注解交给spring管理配置线程池主…

SpringMVC笔记详解

SpringMVC 1、SpringMVC简介 1.1、什么是MVC MVC是一种软件架构的思想,将软件按照模型、视图、控制器来划分 M:Model,模型层,指工程中的JavaBean,作用是处理数据 JavaBean分为两类: 一类称为实体类Be…

[JavaScript] 动态获取方法参数名

JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言&am…

Optional类的使用 java8(附代码)

🍰 个人主页:_小白不加班__ 🍞文章有不合理的地方请各位大佬指正。 🍉文章不定期持续更新,如果我的文章对你有帮助➡️ 关注🙏🏻 点赞👍 收藏⭐️ 文章目录 一、什么是Optional?二、…

科研绘图系列:R语言和弦图 (Chord diagram)

介绍 和弦图(Chord Diagram)是一种用于展示多个实体之间相互关系的数据可视化方法。它通常用于表示网络或系统中不同节点(实体)之间的连接强度或流量。和弦图由一个圆形布局组成,每个节点在圆周上占据一个扇形区域,节点之间的连接通过圆内的线条(和弦)来表示。 特点:…

linux环境下重新编译opencv的安卓动态链接库opencv_java4.so文件

一、安装java 1.8 #安装依赖 sudo apt-get install python-software-properties sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo add-apt-repository ppa:ts.sch.gr/ppa sudo apt-get update sudo apt-get install oracle-java8-installer 二…

VB中的函数和子程序(Sub)的区别和用法

在VB(Visual Basic)及其派生语言如VBA(Visual Basic for Applications)中,函数(Function)和子程序(Sub)是两种不同类型的代码块,它们在用途、返回值以及调用方…

前端必知必会-html的id属性和Iframe

文章目录 HTML id 属性类和 ID 之间的区别带有 ID 和链接的 HTML 书签在 JavaScript 中使用 id 属性HTML IframeIframe - 设置高度和宽度Iframe - 删除边框Iframe - 链接的目标总结 HTML id 属性 HTML id 属性用于为 HTML 元素指定唯一 id。id 属性的值在 HTML 文档中必须是唯…

AI推介-大语言模型LLMs论文速览(arXiv方向):2024.07.15-2024.07.20

文章目录~ 1.SegPoint: Segment Any Point Cloud via Large Language Model2.LLMs as Function Approximators: Terminology, Taxonomy, and Questions for Evaluation3.Scaling Laws with Vocabulary: Larger Models Deserve Larger Vocabularies4.Large Language …

数据结构第七讲:栈和队列OJ题

数据结构第七讲:栈和队列OJ题 1.有效的括号2.用队列实现栈3.用栈实现队列4.设计循环队列 1.有效的括号 链接: OJ题目链接 typedef char StackDataType;typedef struct Stack {StackDataType* arr;//使用一个指针来指向开辟的数组int capacity;//保存数组的空间大…

微信小程序注册及认证

进行了两个小程序的注册及认证,记录一下 首先,注册小程序通常都是给企业注册,有些资料最好事先准备,考虑到认证、备案的审核,以及对公打款需要走公司内的审批等,整个过程可能需要一到两周的时间。 准备工…

【ffmpeg命令入门】获取音视频信息

文章目录 前言使用ffmpeg获取简单的音视频信息输入文件信息文件元数据视频流信息音频流信息 使用ffprobe获取更详细的音视频信息输入文件信息文件元数据视频流信息音频流信息 总结 前言 在处理多媒体文件时,了解文件的详细信息对于调试和优化处理过程至关重要。FFm…

后端面试题日常练-day11 【Java基础】

题目 希望这些选择题能够帮助您进行后端面试的准备,答案在文末 Java中的String和StringBuffer/StringBuilder有何区别? a) String是不可变的,StringBuffer/StringBuilder是可变的 b) String是线程安全的,StringBuffer/StringBuil…