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

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

		<el-tree
            v-model="selectedNode"
            :data="deptOptions"
            :props="{ label: 'title', children: 'children' }"	//自定义名称和子集的字段
            :render-after-expand="false"
            node-key="stationId"	//自定义主键
            show-checkbox		//开启复选框
            check-strictly		//取消父子节点的关联
            highlight-current
            default-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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

天府锋巢直播产业基地:打造电商直播产业先锋集群

天府锋巢直播产业基地&#xff0c;这座以科技金融服务、人才项目扶持、科技企业培育和产业生态链赋能为核心的成都直播产业园区&#xff0c;正积极招商引资&#xff0c;争做电商直播产业的先锋集群。 一、科技金融服务方面&#xff0c;天府锋巢直播产业基地针对科技型小微企业、…

部署k8s客户端,及docker私仓部署

1.部署一个docker私仓 mkdir /opt/docker/registry #配置仓库密码 mkdir /opt/docker/auth cd /opt/docker/auth htpasswd -Bbn admin admin > htpasswd#运行docker私仓服务&#xff0c;下面端口5000:5000 前面的5000对应本机端口可以自定义 docker run -itd \ -v /opt/d…

ios苹果ipa文件app内测分发有哪些操作流程

哈喽&#xff0c;大家好&#xff0c;咕噜淼淼又来和大家见面啦&#xff0c;在iOS应用开发过程中&#xff0c;进行内测分发是非常重要的一环&#xff0c;它能帮助开发者发现并修复应用中的问题&#xff0c;提升用户体验。上两期咱们一起探讨了一下App内测分发的目的及优势&#…

Spring之ApplicationListener实现监听原理

文章目录 ApplicationListener使用方式ApplicationListener实现原理1.引入并实例化时机2.作用时机3.发布事件&#xff0c;生效 总结 ApplicationListener使用方式 package com.cyl.listener;import org.springframework.context.ApplicationEvent; import org.springframework…

element-ui使用记录

element-ui的组件名就是类名 样式穿透&#xff08;用来修改没有类名的子组件样式&#xff09; 例如修改头部具名插槽的样式&#xff08;但是无法定位该元素&#xff09; 查看最后生成的html结构中对应的结构&#xff08;这里的头部有类名&#xff0c;可以直接对该类名进行样…

文件夹类型变无?别担心,数据恢复有高招!

在日常使用电脑的过程中&#xff0c;不少用户都遇到过这样一个令人头疼的问题&#xff1a;原本整齐有序的文件夹突然变成了“类型变无”的状态。这种情况让人措手不及&#xff0c;不仅影响了文件的正常访问&#xff0c;更可能导致重要数据的丢失。那么&#xff0c;文件夹类型变…

leetcode.203. 移除链表元素

题目 题意&#xff1a;删除链表中等于给定值 val 的所有节点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; 输入&#xff1a;head [], val 1 输出&#xff1a;[] 示例 3&#xff1a; 输入&#…

鸿蒙Native输出so动态库,并提供给第三方导入使用

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 API:9 最近在学习鸿蒙的Native输出so动态库&#xff0c;下面就给大家分享下我的学习心得及在实现过程中遇到的问题。 实现需求&#xff1a;通过so库输出文本内容 “你好&#xff0c;鸿蒙&#xff01;” 参考资料…

蓝桥杯练习系统(算法训练)ALGO-959 P0705 集合运算

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 输入两个整数集合A、B&#xff0c;求出他们的交集、并集以及B在A中的余集。交集、并集和余集的计算都要求写成一个单独的函数。   输…

记Postman参数化

因为需要在WEB页面上处理部分数据&#xff0c;手动操作太慢&#xff0c;所以考虑使用接口方式处理&#xff0c;因急于使用&#xff0c;用Python Request的方式&#xff0c;写代码也来得慢&#xff0c;故采用Postman加外部文件参数化方式来实现。 接口请求是Post方式&#xff0c…

注意!今明两天广东等地仍有较强降雨

中央气象台监测显示 进入4月以来 我国江南、华南北部强降雨 接连而至 湖南、江西、浙江中南部 福建大部、广东中北部等地降雨量 较常年同期偏多1倍以上 上述地区部分国家观测站 日雨量突破4月历史极值 截至4月7日早晨 广东广州、惠州、清远 韶关、河源等地部分地区 …

2024/4/1—力扣—二叉树的最近公共祖先

代码实现&#xff1a; 思路&#xff1a; 递归判断左子树和右子树&#xff0c;查找p或者q是否在当前节点的子树上 1&#xff0c;在同一子树上&#xff0c;同一左子树&#xff0c;返回第一个找到的相同值&#xff0c;同一右子树上&#xff0c;返回第一个找到的相同值 2&#xff0…

关东升老师力作!四本编程宝典,带你畅游编程世界

&#x1f31f;《看漫画学C》&#xff1a;关东升老师以漫画的形式&#xff0c;让你在欢笑中轻松掌握C编程的核心知识。不再枯燥&#xff0c;不再难懂&#xff0c;让编程变得有趣又简单&#xff01; &#x1f3a8;《MATLAB科研绘图与学术图表绘制从入门到精通》&#xff1a;关东升…

JSON在线工具使用文档

功能支持 ctrls json格式化游览器本地保存ctrla ctrlc 自动检测选中范围是否是全选&#xff0c;然后按照格式化方式添加到粘贴板中json 粘贴JSON自动格式化json可视化修改json压缩复制json层级折叠json关键key 搜索(自动提示高亮)满足某些近视的可以自行调整字体大小, 并且会游…

升级xcode15 报错Error (Xcode): Cycle inside Runner

升级xcode15后报错 Could not build the precompiled application for the device. Error (Xcode): Cycle inside Runner; building could produce unreliable results. This usually can be resolved by moving the shell script phase Thin Binary so that it runs before th…

【蓝桥杯-读数据】

蓝桥杯-读数据 P8598 [蓝桥杯 2013 省 AB] 错误票据 P8598 [蓝桥杯 2013 省 AB] 错误票据 这道题本身很简单&#xff0c;最大的难点在于读入数据。 #include<bits/stdc.h> using namespace std; #define int long long const int N 2e5 10; int a[N]; signed main()…

【1】初识 Python

【1】初识 Python 1、编程语言(1) 语言(2) 编程语言(3) 如何利用编程语言与计算机交流(4) 常见的编程语言(5) 语法 2、Python 简介(1) 什么是 Python(2) Python 能做什么(3) Python 的由来(4) Python的特点① 语法精简② 生态好&#xff0c;开发效率高③ Python开发初体验&…

UNITY实战进阶-BatchRendererGroup+Jobs+Burst+RVO2+GPUAnimation 实现万人团战(一)

研究思路&#xff1a;GPUAnimation把动画放入GPU中处理&#xff0c;BatchRendererGroup进行动态批量渲染处理&#xff0c;JobsBurst进行多线程处理逻辑&#xff08;移动、攻击等&#xff09;&#xff0c;RVO2采用Jobs的寻路导航。 准备工作&#xff1a; Editor > Project S…

VBA技术资料MF139:在PowerPoint中添加末尾幻灯片

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

Vue - 你知道Vue组件之间是如何进行数据传递的吗

难度级别:中级及以上 提问概率:85% 这道题还可以理解为Vue组件之间的数据是如何进行共享的,也可以理解为组件之间是如何通信的,很多人叫法不同,但都是说的同一个意思。我们知道,在Vue单页面应用项目中,所有的组件都是被嵌套在App.vue内…