vue3渲染el-tree组件,给默认选中的节点,禁用所有子节点

实现逻辑:给默认选中节点的所有子节点添加一个disabled属性,以此禁用子节点。

编写代码

<template><el-tree :props="{ children: 'children', label: 'name' }" :data="treeListData" show-checkbox node-key="id" ref="treeRef"check-strictly :default-expand-all="true" :default-checked-keys="checkedIdArr" @check-change="handleCheckChange" />
</template><script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance } from 'vue';export default defineComponent({setup() {// 页面加载时onMounted(() => {data.treeListData = setSubDisabled(data.treeListData, data.checkedIdArr)});const { proxy }: any = getCurrentInstance();const data = reactive({treeListData: [{id: 1,name: "一级1",pid: 0,is_level: 1,children: [{id: 2,name: "二级1",pid: 1,is_level: 2,children: [{id: 9,name: "三级1",pid: 1,is_level: 3,}]}]},{id: 3,name: "一级2",pid: 0,is_level: 1,children: [{id: 4,name: "二级1",pid: 3,is_level: 2,children: [{id: 5,name: "三级1",pid: 4,is_level: 3,children: [{id: 6,name: "四级1",pid: 5,is_level: 4,children: [{id: 7,name: "五级1",pid: 6,is_level: 5,}]}]}]},{id: 8,name: "二级2",pid: 3,is_level: 2,}]},] as any[],checkedIdArr: [1, 4]});function setSubDisabled(nodes: any[], checkedIdArr: number[]) {nodes.forEach((node: any) => {if (checkedIdArr.includes(node.id)) {function setDisabled(sonNode: any[]) {sonNode && sonNode.forEach((v: any) => {v.disabled = trueif (v.children && v.children.length > 0) {setDisabled(v.children)}})}setDisabled(node.children)}if (node.children && node.children.length > 0) {setSubDisabled(node.children, checkedIdArr);}})return nodes}const handleCheckChange = (curObj: any, checked: boolean,) => {let getCheckedKeys = proxy.$refs.treeRef.getCheckedKeys()let newArr = disableSubNodes(curObj.children, checked, getCheckedKeys)data.checkedIdArr = newArrproxy.$refs.treeRef.setCheckedKeys(newArr)}const disableSubNodes = (nodes: any, checked: boolean, checkedKeys: number[]) => {nodes?.length > 0 && nodes.forEach((node: any) => {checkedKeys = checkedKeys.filter((v: number) => v !== node.id)node.disabled = checked;if (node.children && node.children.length > 0) {disableSubNodes(node.children, checked, checkedKeys);}});return checkedKeys}return {...toRefs(data), handleCheckChange};},
});
</script>

效果图

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

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

相关文章

uniapp中vuex(全局共享)的应用

一、Vuex概述 1.1 官方解释 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理 应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化 - Vuex 也集成到 Vue 的官方调试工具 devtools extension&#xff0c;提供了诸…

Unity中触发器Trigger无法被射线检测到的问题

今天在做项目的时候发现,同一个物体,当他是碰撞器的时候,可以被射线检测到. 但是当他变成触发器的时候,射线就检测不到了??? 本来以为就是这样的,但是查了资料发现并没有这样的限制,触发器也是可以正常被射线检测的 到处查资料都没有发现问题,后来发现是下面这个设置不知道…

搭建springmvc项目

什么是springmvc MVC它是一种设计理念。把程序按照指定的结构来划分: Model模型 View视图 Controller控制层 springmvc框架是spring框架的一个分支。它是按照mvc架构思想设计的一款框架。 springmvc的主要作用: 接收浏览器的请求数据&#xff0c;对数据进行处理&#xff0c;…

超越 RAG 基础:AI 应用的高级策略

作者&#xff1a;来自 Elastic Elastic Platform Team 我们最近与 Cohere 举办的虚拟活动深入探讨了检索增强生成 (retrieval augmented generation - RAG) 的世界&#xff0c;重点讨论了在概念验证阶段之后构建 RAG 应用程序的关键注意事项。我们的演讲者是 Elastic 的首席解…

音频开发中常见的知识体系

在 Linux 系统中&#xff0c;/dev/snd 目录包含与声音设备相关的文件。每个文件代表系统中的一部分音频硬件或音频控制接口。以下是你列出的文件及其含义&#xff1a; 一.基本术语 样本长度(sample)&#xff1a;样本是记录音频数据最基本的单位&#xff0c;计算机对每个通道采…

贪心算法 part01

class Solution { public:int maxSubArray(vector<int>& nums) {int result INT32_MIN;int count 0;for (int i 0; i < nums.size(); i) {count nums[i];if (count > result) { // 取区间累计的最大值&#xff08;相当于不断确定最大子序终止位置&#xff…

Ubuntu 安装texstudio sty与texlive

手动安装需要的包 访问CTAN网站&#xff08;Comprehensive TeX Archive Network&#xff09;并下载enumitem宏包&#xff1a; enumitem CTAN页面下载后&#xff0c;将宏包解压到/usr/share/texmf/tex/latex/下。 可打开texstudio/帮助/宏包帮助下载。 如果不想手动安装一个个…

Moretl安全日志采集工具

永久免费: 至Gitee下载 使用教程: Moretl使用说明 使用咨询: 用途 定时全量或增量采集工控机,电脑文件或日志. 优势 开箱即用: 解压直接运行.不需额外下载.管理设备: 后台统一管理客户端.无人值守: 客户端自启动,自更新.稳定安全: 架构简单,兼容性好,通过授权控制访问. 架…

CAN配置---波特率中断引脚等---autochips-AC7811-ARM-M3内核

1、配置工具 虽然不怎么好用&#xff0c;但比没有强多了。具体看图&#xff1a; 时钟选着 NVIC配置 GPIO配置 2、生成的具体配置信息 NXP的配置工具里面&#xff0c;具体的波特率可以直接显示&#xff0c;这个工具没有&#xff0c;怎么办&#xff1f; 它放到了生成的代码里面…

【ETCD】ETCD 架构揭秘:内部各组件概览

ETCD 的主要组件及它们之间的关联关系如下&#xff1a; 目录 1. Client&#xff08;客户端&#xff09;2. gRPC 接口3. Etcd Server Main Loop&#xff08;ETCD 主循环&#xff09;4. Raft&#xff08;共识模块&#xff09;5. Peer Etcd Nodes&#xff08;ETCD 集群节点&#x…

乐凡信息智能安全管控方案:助力油气田行业安全管控多方位升级

我国油田地域广阔&#xff0c;分布着大量各种油井&#xff0c;油井开采设备的连续稳定运行是保证石油开采的首要条件。然而&#xff0c;由于油田多位于特殊地理环境中&#xff0c;因而实现油井之间的通信首要问题就是要克服地理环境所带来的限制&#xff0c;传统通信系统的建设…

windows 使用python共享网络给另外一个网卡

# -*- coding: utf-8 -*- import subprocessdef open_share(to_shared_adapter, from_shared_adapter):"""打开以太网的网络共享:return: None"""powershell_script f"""# Register the HNetCfg library (once)# regsvr32 hnetc…

深度学习实战智能交通计数

本文采用YOLOv8作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv8以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对车辆目标数据集进行训练和优化&#xff0c;该数据集包含丰富的车辆目标图像样本…

rebase ‘A‘ onto ‘master‘ 和 merge ‘master‘ into ‘A‘有什么区别

在Git版本控制系统中&#xff0c;rebase 和 merge 是两种不同的操作&#xff0c;用于合并分支。rebase A onto master 和 merge master into A 虽然最终目的都是将两个分支的更改合并在一起&#xff0c;但它们在处理方式和结果上有所不同。 rebase ‘A’ onto ‘master’ 含义…

MySQL Explain 分析SQL语句性能

一、EXPLAIN简介 使用EXPLAIN关键字可以模拟优化器执行SQL查询语句&#xff0c;从而知道MySQL是如何处理你的SQL语句的。分析你的查询语句或是表结构的性能瓶颈。 &#xff08;1&#xff09; 通过EXPLAIN&#xff0c;我们可以分析出以下结果&#xff1a; 表的读取顺序数据读取…

关于SAP Router连接不稳定的改良

这个也是网上看来的&#xff0c;之前在用的时候也在想是不是建立一个长连接&#xff0c;就不至于断线。今天正好看到。 关于SAP Router连接不稳定的改良 我们在使用SAPRouter时经常会碰到断线&#xff0c;其发生原因有很多&#xff0c;如&#xff1a;网络不稳定、操作间隔时间…

游泳溺水识别数据集,对9984张原始图片进行YOLO,COCO JSON, VOC XML 格式的标注,平均识别率在91.7%以上

游泳溺水识别数据集&#xff1a; 对9984张原始图片进行YOLO&#xff0c;COCO JSON, VOC XML 格式的标注&#xff0c;平均识别率在91.7&#xff05;以上 &#xff0c;可识别泳池或者水库中是否有人溺水。 数据集分割 训练组98&#xff05; 9818图片 有效集&#xff05;…

Docker的容器编排

目录 1. 什么是容器编排&#xff08;Docker Compose&#xff09;2. 容器编排的功能3. 容器编排文件&#xff08;docker-compose.yml&#xff09;的介绍3.1 文件语法版本3.2 文件基本结构及常见指令 4. Docker Compose命令详解4.1 Docker Compose命令清单4.2 命令格式和常见选项…

Type 类型 总结

GetType、Typeof Type 官网资料 IsAssignableFrom IsAssignableTo 在C#中&#xff0c;Type.IsAssignableFrom方法用于判断一个类型是否可以从另一个类型赋值。它检查源类型是否是目标类型的基类或接口。 isAssignableFrom(Class<?> c) 标识 “当前Class 是否是给定…

温度传感器DS18B20详解

前面我们学习 DHT11 的时候提到了 DS18B20&#xff0c;它有很宽的测温范围&#xff0c;-55C ~ 125C。那么本次我们就来详细介绍一下 DS18B20。 DS18B20 是一种单总线数字温度传感器&#xff0c;它被广泛应用于各种领域&#xff0c;例如气象监测、室内温度控制、工业自动化等。…