vue3+element-ui-plus的el-tree组件实现复选框形式下的单选功能,且禁用父级

实现效果图,一二级都是灰色的不可选,三级只能同时选中一个
在这里插入图片描述

		<el-treev-model="selectedNode":data="deptOptions":props="{ label: 'title', children: 'children' }"	//自定义名称和子集的字段:render-after-expand="false"node-key="stationId"	//自定义主键show-checkbox		//开启复选框check-strictly		//取消父子节点的关联highlight-currentdefault-expand-all@check="handleCheck"	//选中节点事件:filter-node-method="filterNode"ref="deptTreeRef"/>

只要给对应的节点添加字段"disabled": true,即可禁用节点,因为使用了check-strictly取消父子节点关联,所有即使禁用父节点,也不会影响子节点的选择

<script setup>const deptOptions = ref([{"stationId": "8cd174b0-6c38-43f4-97b6-b64832b34d9a","parentId": "","title": "线路1","children": [{"stationId": "cf5f8c07-a882-4e24-aec8-0983660c1dc9","parentId": "8cd174b0-6c38-43f4-97b6-b64832b34d9a","title": "车站2","children": [{"stationId": "1cf5f8c07-a882-4e24-aec8-0983660c1dc9","parentId": "cf5f8c07-a882-4e24-aec8-0983660c1dc9","title": "计算机联锁图册","children": [],},{"stationId": "2cf5f8c07-a882-4e24-aec8-0983660c1dc9","parentId": "cf5f8c07-a882-4e24-aec8-0983660c1dc9","title": "区间自动闭塞图册","children": [],}],"disabled": true},{"stationId": "ef59bc57-aa42-43b8-960f-ce9caf745484","parentId": "8cd174b0-6c38-43f4-97b6-b64832b34d9a","title": "车站1","children": [{"stationId": "1ef59bc57-aa42-43b8-960f-ce9caf745484","parentId": "ef59bc57-aa42-43b8-960f-ce9caf745484","title": "计算机联锁图册","children": [],},{"stationId": "2ef59bc57-aa42-43b8-960f-ce9caf745484","parentId": "ef59bc57-aa42-43b8-960f-ce9caf745484","title": "区间自动闭塞图册","children": [],}],"disabled": true}],"disabled": true},{"stationId": "5226d1f5-b85f-46c7-b05f-157815d590b8","parentId": "","title": "线路3","children": [{"stationId": "cd8a7881-a2f0-4490-afe0-44bd639c149e","parentId": "5226d1f5-b85f-46c7-b05f-157815d590b8","title": "车站2","children": [{"stationId": "1cd8a7881-a2f0-4490-afe0-44bd639c149e","parentId": "cd8a7881-a2f0-4490-afe0-44bd639c149e","title": "计算机联锁图册","children": [],},{"stationId": "2cd8a7881-a2f0-4490-afe0-44bd639c149e","parentId": "cd8a7881-a2f0-4490-afe0-44bd639c149e","title": "区间自动闭塞图册","children": [],}],"disabled": true},{"stationId": "289103d4-0d1f-4c3e-93b5-e382b0a58044","parentId": "5226d1f5-b85f-46c7-b05f-157815d590b8","title": "车站1","children": [{"stationId": "1289103d4-0d1f-4c3e-93b5-e382b0a58044","parentId": "289103d4-0d1f-4c3e-93b5-e382b0a58044","title": "计算机联锁图册","children": [],},{"stationId": "2289103d4-0d1f-4c3e-93b5-e382b0a58044","parentId": "289103d4-0d1f-4c3e-93b5-e382b0a58044","title": "区间自动闭塞图册","children": [],}],"disabled": true},{"stationId": "481b0a4e-7523-4023-9a8c-1af6a51c125e","parentId": "5226d1f5-b85f-46c7-b05f-157815d590b8","title": "车站3","children": [{"stationId": "1481b0a4e-7523-4023-9a8c-1af6a51c125e","parentId": "481b0a4e-7523-4023-9a8c-1af6a51c125e","title": "计算机联锁图册","children": [],},{"stationId": "2481b0a4e-7523-4023-9a8c-1af6a51c125e","parentId": "481b0a4e-7523-4023-9a8c-1af6a51c125e","title": "区间自动闭塞图册","children": [],}],"disabled": true}],"disabled": true}
]);const selectedNode = ref(null);const deptTreeRef = ref(null);/** 通过条件过滤节点  */const filterNode = (value, data) => {if (!value) return true;return data.label.indexOf(value) !== -1;};//选中事件function handleCheck(checkedNode) {//实现单选关键就是这一点:在选中某个项之后,将选中的节点数组只设置成当前选中的节点,保证只有一个选项deptTreeRef.value.setCheckedKeys([checkedNode.stationId]);}
</script>

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

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

相关文章

12 | 排序(下):如何用快排思想在O(n)内查找第K大元素?归并排序和快速排序

 下载APP  12 | 排序&#xff08;下&#xff09;&#xff1a;如何用快排思想在O(n)内查找第K大元素&#xff1f; 2018-10-17 王争数据结构与算法之美进入课程 讲述&#xff1a;修阳 时长21:58大小8.81M  上一节我讲了冒泡排序、插入排序、选择排序这三种排序算法&…

2024/4/2—力扣—栈的最小值

代码实现&#xff1a; typedef struct node {int val;struct node *next; } Node;typedef struct {struct node *top;int min; } MinStack;/** initialize your data structure here. */MinStack* minStackCreate() {MinStack *obj malloc(sizeof(*obj));obj->top NULL;ob…

爬虫 新闻网站 以湖南法治报为例(含详细注释) V1.0

目标网站&#xff1a;湖南法治报 爬取目的&#xff1a;为了获取某一地区更全面的在湖南法治报已发布的宣传新闻稿&#xff0c;同时也让自己的工作更便捷 环境&#xff1a;Pycharm2021&#xff0c;Python3.10&#xff0c; 安装的包&#xff1a;requests&#xff0c;csv&#xff…

【Java集合进阶】泛型的通配符和综合练习

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(七)- 向量算术指令格式

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

Mysql底层原理六:InnoDB 数据页结构

1.行格式 1.1 Compact行格式 1.1.1 示意图 1.1.2 准备一下 1&#xff09;建表 mysql> CREATE TABLE record_format_demo (-> c1 VARCHAR(10),-> c2 VARCHAR(10) NOT NULL,-> c3 CHAR(10),-> c4 VARCHAR(10)-> ) CHARSETascii ROW_FORMATCOM…

怎么将静图变成gif?告诉你三步快速制作

想要将jpg格式的静图变成gif格式的动图时要怎么操作呢&#xff1f;在这个飞速发展的数字媒体时代&#xff0c;经常会在网络上分享有趣的动态图片。当我们想要将自己手中的jpg图片变成gif动图的时候怎么实现呢&#xff1f;很简单&#xff0c;通过使用gif图片制作&#xff08;htt…

windows环境下实现ffmpeg本地视频进行rtsp推流

摘要&#xff1a;有时候服务端&#xff08;如linux&#xff09;或者边缘端&#xff08;jetson盒子&#xff09;需要接受摄像头的视频流输入&#xff0c;而摄像头的输入视频流一般为rtsp&#xff0c;测试时需要搭建摄像头环境&#xff0c;很不方便&#xff0c;因此需要对本地视频…

YOLOV8注意力改进方法:DoubleAttention(附代码)

原论文地址&#xff1a;原论文地址 DoubleAttention网络结构的优点在于&#xff0c;它能够有效地捕获图像中不同位置和不同特征的重要性&#xff0c;从而提高了图像识别和分割的性能。 论文相关内容介绍&#xff1a; 论文摘要&#xff1a;学习捕捉远程关系是图像/视频识别的…

springboot系列-api接口请求实现

springboot HTTP请求接口实现 基于springboot 2.6.6 代码地址&#xff1a;github仓库地址 更多系列教程请关注公众号’coderlike’ 如果觉得有帮助希望能关注下公众号 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-b…

Elasticsearch索引之嵌套类型:深度剖析与实战应用

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! Elasticsearch是一个基于Lucene的搜索服务器&#xff0c;它提供了一个分布式、多租户能力的全文搜索引擎&#xff0c;并带有一个基…

烧坏两块单片机,不知道原因?

没有看你的原理图&#xff0c;以下是造成烧毁芯片的几个环节&#xff1a; 1. 最大的可能性是你的单片机电机控制输出与电机驱动电路没有隔离。 我的经验&#xff0c;使用STM32控制电机&#xff0c;无论是直流电机脉宽调制&#xff0c;还是步进电机控制&#xff0c;控制电路与…

PCA算法(Principal Component Analysis)揭秘

经典PCA算法 PCA算法的应用包括降维、有损数据压缩、特征抽取、数据可视化等。目前PCA算法有两个通用定义&#xff0c;能殊途同归&#xff0c;得到相同的结果。一方面&#xff0c;我们可以用正交投影来定义PCA&#xff0c;即将数据投影到更低维的线性子空间&#xff0c;也被称…

DolphinScheduler 答案整理,最新面试题

DolphinScheduler的架构设计是怎样的&#xff1f; DolphinScheduler的架构设计主要分为四个层次&#xff1a;前端界面层、API服务层、调度层和执行层。 1、前端界面层&#xff1a; 提供任务的定义、流程的设计、监控等功能&#xff0c;用户通过前端界面操作整个系统。 2、AP…

“揭秘循环购模式:快消品行业复购利器

大家好&#xff0c;我是吴军&#xff0c;来自一家专注于软件开发与商业模式设计的公司。我们的核心业务是构建商城系统&#xff0c;并为各企业提供全方位的商业模式解决方案。至今&#xff0c;我们已经成功打造了超过两百种独特的商业模式&#xff0c;助力众多企业实现商业目标…

C++的并发世界(九)——条件变量

0.绪论——单例模型 单例设计模式是一种常见的设计模式&#xff0c;用于确保某个类只能创建一个实例。由于单例实例是全局唯一的。因此在多线程环境中使用单例模式时,需要考虑线程安全的问题。 1.消费者设计模式 2.condition_variable使用步骤 ①准备好信号量 std::conditio…

Linux系统Docker部署Apache Superset并实现公网实时访问本地数据

文章目录 前言1. 使用Docker部署Apache Superset1.1 第一步安装docker 、docker compose1.2 克隆superset代码到本地并使用docker compose启动 2. 安装cpolar内网穿透&#xff0c;实现公网访问3. 设置固定连接公网地址 前言 Superset是一款由中国知名科技公司开源的“现代化的…

电商API接口告诉你中国跨境电商何以“一路繁花”?

3月31日&#xff0c;启程跨境华东中心仓突破单日自营订单5000单&#xff0c;刷新连云港市跨境进口单日纪录。一季度&#xff0c;连云港市纳入“点点通”公共服务平台统计的跨境电商交易额达2.06亿元&#xff0c;同比增长77.03%。 连云港的“景象”只是中国跨境电商业态蓬勃发展…

管廊ar实景可视化巡检提升安全性

在科技日新月异的今天&#xff0c;智慧工地ar远程巡检交互系统应运而生&#xff0c;它是ar开发公司深圳华锐视点综合运用了AR增强现实、5G通信、人工智能、物联网以及GPS北斗定位等前沿技术&#xff0c;为企业打造了一套全新的数字化巡检解决方案。不仅解放了巡检人员的双手&am…

揭秘IP地理位置:从技术原理到隐私考量

在当今数字化的世界中&#xff0c;IP 地理位置已成为网络定位、广告定向和安全控制等领域的重要工具。然而&#xff0c;对于大多数人来说&#xff0c;IP 地理位置的工作原理以及与隐私之间的关系可能还有些模糊。本文将深入探讨 IP 地理位置的技术原理&#xff0c;以及与隐私相…