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;…

CSS 进阶教程:从定位到动画与布局

文章目录 &#x1f31f; CSS 进阶教程&#xff1a;从定位到动画与布局&#x1f31f; 目录&#x1f31f; 1. 定位**Static&#xff08;默认定位&#xff09;****Relative&#xff08;相对定位&#xff09;****Absolute&#xff08;绝对定位&#xff09;****Fixed&#xff08;固定…

Nginx - 相关概念解释及整体结构

概述 定义 一个高性能的 HTTP 和反向代理服务器一个 IMAP/POP3/SMTP 代理服务器目标&#xff1a;高效处理高并发连接安装流程&#xff1a;Installing nginx 功能 功能说明⭐ 反向代理作为反向代理服务器&#xff0c;将客户端请求转发到一个或多个后端服务器负载均衡通过多种负…

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

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

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

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

修改ubuntu apt 源及apt 使用

视频教程:修改ubuntu apt 源和apt 使用方法_哔哩哔哩_bilibili 1 修改apt源 1.1 获取阿里云ubuntu apt 源 https://developer.aliyun.com/mirror/ubuntu?spma2c6h.13651102.0.0.3e221b11mqqLBC 1.2 修改apt 源 vim /etc/apt/sources.list deb https://mirrors.aliyun.com/ub…

贪心算法 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使用说明 使用咨询: 用途 定时全量或增量采集工控机,电脑文件或日志. 优势 开箱即用: 解压直接运行.不需额外下载.管理设备: 后台统一管理客户端.无人值守: 客户端自启动,自更新.稳定安全: 架构简单,兼容性好,通过授权控制访问. 架…

计算机网络信息系统安全问题及解决策略

目 录 摘 要 前 言 一、计算机网络信息系统研究现状及安全技术 &#xff08;一&#xff09;计算机网络信息系统研究现状 &#xff08;二&#xff09;计算机网络信息系统全技术概述 二、计算机网络信息系统安全问题 &#xff08;一&#xff09;环境危害引发的安全问…

FFMPEG视频转图片

用FFMPEG视频转图片&#xff0c;并且for循环 import os import subprocess# 输入文件夹和输出文件夹路径 input_folder r"I:\xxx" output_base_folder r"D:\xxx\YOLO\data\video" output_subfolder_name "20240609"# 创建输出子文件夹 output…

银河麒麟桌面操作系统添加WPS字体

【使用场景】 银河麒麟桌面操作系统支持添加WPS字体。在银河麒麟桌面操作系统中使用WPS软件编辑文档时存在需要添加WPS字体的情况,例如字体缺失或者需要特殊字体时,需要添加WPS字体。 【操作方法】 步骤一:在互联网上搜索并下载.ttf格式的字体文件。 步骤二:下载完成后,在…

skywalking 搭建 备忘录

基础环境 apache-skywalking-apm-9.6.0.tar.gz apache-skywalking-java-agent-9.1.0.tgz elasticsearch 7.14.1 采用dockers搭建 或者手动部署 kibana 可视化 应用 微服务版 consumer.jar eureka.jar 注册中心 provider.jar skywalking 地址 https://skywalkin…

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…

使用 imageio 库轻松处理图像与视频

使用 imageio 库轻松处理图像与视频 imageio 是一个 Python 库&#xff0c;用于读取和写入多种图像和视频格式。它功能强大、易于使用&#xff0c;广泛应用于图像处理、视频编辑和数据可视化等领域。本篇文章将介绍 imageio 的基础功能、常见用法以及高级操作。 一、安装 imag…

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

我国油田地域广阔&#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…