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  上一节我讲了冒泡排序、插入排序、选择排序这三种排序算法&…

dependencies 和 devDependencies 的区别,安装包的时候,怎么做判断

在 package.json 文件中&#xff0c;dependencies 和 devDependencies 用于指定项目的依赖包&#xff0c;但它们有不同的用途&#xff1a; dependencies 用途&#xff1a;包含项目运行时所需的依赖包。这些依赖在生产环境中是必需的。示例&#xff1a;vue, element-plus 等前…

Scrapy数据解析(XPath、CSS)

Scrapy数据解析(CSS、XPath) 在Scrapy中原有的解析语法与原来的有点略微的区别 目录 Scrapy数据解析(CSS、XPath)CSS解析器XPath解析器 CSS解析器 示例&#xff1a; response.css(a)返回的是selector对象response.css(a).extract()返回的是a标签对象response.css(a::text).…

蓝桥杯 基础练习 01字串

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 对于长度为5位的一个01串&#xff0c;每一位都可能是0或1&#xff0c;一共有32种可能。它们的前几个是&#xff1a; 00000…

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;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

Nginx-调度器、优化

Nginx调度器 一、HTTP调度 1、反向代理语法格式 http {upstream webserver { # 定义源服务器组#ip_hash;server 192.168.88.100:80 weight2;server 192.168.88.200:80 down;server 192.168.88.101:80 max_fails2 fail_timeout30;}server {listen 80;server_name _…

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…

Vue 打包自动清理缓存

在Vue开发中遇到打包部署之后总是要手动清除浏览器缓存数据的问题&#xff0c;此问题可以用下方式&#xff1a; 1、package.json文件中有一个管理版本号属性&#xff1a;version&#xff0c;在我们每次打包部署之前修改当前版本号 2、在入口文件main.js文件中&#xff0c;加入版…

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…

PyCharm 2024.1 版本带来了一系列重要的更新和新特性

Hugging Face 模型和数据集的文档预览&#xff1a; 可直接在 IDE 中查看 Hugging Face 模型和数据集的文档&#xff0c;无需离开编辑环境。 本地全行代码补全&#xff1a; 对于前端框架&#xff0c;如 JavaScript 和 TypeScript&#xff0c;PyCharm 现在支持基于机器学习的全行…

魔众 文库配置异步转换

同步转换 系统默认使用同步转换&#xff0c;即用户上传文档提交接口瞬间&#xff0c;系统会立即进行转换。 同步转换容易造成页面卡顿&#xff0c;转换时间超长的情况下&#xff0c;系统接口会超时。 异步转换 系统支持异步转换&#xff0c;即用户上传文档提交接口瞬间&…

【算法】合并两个有序数组 - 双指针

题目 两个有序整数数组 nums1 和 nums2 及他们的元素个数 m、n&#xff0c;将 nums2 合并到 nums1 中&#xff0c;结果依然有序。 nums1 长度默认为 m n&#xff0c;没有元素的位置用 0 补齐。 原理 定义三个指针&#xff0c;分别指向 nums1 的最大元素(p1)、nums2 的最大元…

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

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

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

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