Element:Cheack多选勾选效果逻辑判断
效果展示
取消子级勾选，父级的勾选效果
代码合集
（1）组件代码 fromlist.cheackType 类型，permissio表示是权限. fromlist:[{id:1,children:[{...}]},...]传递的数据大致结构
<!-- 操作权限 --><template v-if="fromlist.cheackType == 'permission'"><div v-if="item.cheackall && item.title" class="CheackAllBox"><el-checkbox v-model="item.selected" :indeterminate="item.isIndeterminate" :label="item.title" @change="(value) => { handelCheackAll(value, key, item);} ">{{ item.name }}</el-checkbox></div><el-checkbox-group v-model="TableList[key]"><!-- 最父级 --><div v-for="(val, i) in item.children" class="tow_box"><el-checkbox :indeterminate="val.isIndeterminate" @change="(value) => { cheackChange(value, key, val, val.id, item);}" :label="val.id">{{ val.name }}</el-checkbox><div class="three_box_nochildren"><template v-for="(c_val, i) in val.children"><div v-if="!c_val.children"> <el-checkbox :label="c_val.id">{{ c_val.name}}</el-checkbox></div></template></div><!-- 子级 --><div class="three_box"><template v-for="(c_val, i) in val.children"><div v-if="c_val.children"><el-checkbox :label="c_val.id" :indeterminate="c_val.isIndeterminate" @change=" (value) => {cheackChange(value, key, c_val, c_val.id, val);}" >{{ c_val.name }}</el-checkbox><div class="four_box"><template v-for="(s_val, i) in c_val.children"><el-checkbox :indeterminate="s_val.isIndeterminate" @change=" (value) => { cheackChange( value,key, s_val,s_val.id, c_val ); }" :label="s_val.id">{{ s_val.name }}</el-checkbox><div :class=" s_val.children.length > 0 ? 'fir_box' : 'four_box'" v-if="s_val.children.length > 0 "><template v-for="(ss_val, i) in s_val.children"><el-checkbox :indeterminate="ss_val.isIndeterminate" @change=" (value) => { cheackChange( value, key, ss_val, ss_val.id, s_val);}" :label="ss_val.id"> {{ ss_val.name }} </el-checkbox><div :class="ss_val.children.length > 0? 'fir_box': 'four_box'" v-if="ss_val.children.length > 0"><template v-for="(sss_val, i) in ss_val.children"><el-checkbox :indeterminate="sss_val.isIndeterminate" @change=" (value) => { cheackChange(value, key,sss_val, sss_val.id,ss_val); }" :label="sss_val.id"> {{ sss_val.name }}</el-checkbox></template></div></template></div></template></div></div></template></div></div></el-checkbox-group></template>(2) 处理方法
function cheackChange( value: any,key: string,item: any,id: any,p_item: any,isselect: boolean) {
//点击传递的数据console.log('value',value,'key',key,'item',item,'id',id,'p_item',p_item,'isselect',isselect);if (!props.fromlist.notrigger) {
//判断是否有子数据，则调到处理全选方法 针对点击的多选这个数据的子级，而不是最父级的子级if (item.children.length > 0) {handelCheackAll(value, key, item, id, "");}
//cheack点击传递过来的 数据 trus or falseif (value) {//处理勾选的方法getIdUpdataPrintSelectStatus(p_item,key,isselect,item.id,value,true,id);} else {//将点击的对象赋值为 false 就是取消勾选 item.isIndeterminate = false;//处理勾选的方法getIdUpdataPrintSelectStatus(p_item, key,isselect,item.id,value,false,id);}}}function getIdUpdataPrintSelectStatus(data: any,key: string,isselect: boolean,printid: number,value: boolean,is: boolean,id: number) {forFromlistGetIdUpdataStatus(props.fromlist.listData[key],data.id,key,is,id);
}function forFromlistGetIdUpdataStatus(data:any,printid:number,key:string,is:boolean,id:number){//传递过来的 多选存放的数组 data : 传递给组件渲染的数组 ,printid:多选勾选的元素的父级id key：是当前分辨是哪个组件的key(如标签页点击切换不同模块下的多选，key就是tab的key值) is:勾选返回的 true(勾选中)/false(取消勾选) id:当前勾选元素的id 在此方法中没用到//循环传递过来的数组data.children.map(item=>{//判断数组下是否能够匹配到 传递过来当前勾选数据的父id(判断父级勾选效果)if(item.id == printid){//找到勾选的父级//判断结构数组的子级的id是否存在 TableList[key]存放勾选数据中 并且 判断(你勾选的那个cheack)当前勾选的状态是trueif(item.children.every(c_item=> TableList[key].includes(c_item.id)) && is){//判断是否取消 cheack indeterminate属性，循环父级中是否所有的子级被勾选let isinfalse = item.children.every(c_item => {// 判断勾选数据中是否存在所有的子级数据。 并且子级为false if (TableList[key].includes(c_item.id) && !c_item.isIndeterminate ) {// 判断是否包含所有子级数据 这一层已经可以循环到勾选的那层级了return c_item.children.every(cc_item => TableList[key].includes(cc_item.id));}return false;});//判断是否存在勾选数据中，没有的话就添加进去TableList[key].includes(item.id) ? '' : TableList[key].push(item.id)//是否父级层级下的子级全部勾选，将isIndeterminate设置为false ,设置为false 并且 父级下的子级数据全部都在TableList[key]中，父级勾选状态就会变成勾选。isinfalse ? item.isIndeterminate = false : ''}else if(item.children.some(c_item=> TableList[key].includes(c_item.id))){// console.log('有子集并且还是勾选状态',item,'TableList[key]',TableList[key]);!TableList[key].includes(item.id) ? TableList[key].push(item.id) : ''//设置为减号item.isIndeterminate = true}else{//勾选的数组中如果不存在父级中的子级数据 就将父级取消所有状态 变成空的cheack框item.isIndeterminate = isTableList[key] = TableList[key].filter(num => num != item.id);}//如果此层级找不到就一层一层向上找 直到能匹配上传递过来的勾选父级id:printidforFromlistGetIdUpdataStatus(props.fromlist.listData[key],item.parent_id,key,is,id)}else {//如果此层级找不到就一层一层向下找 直到能匹配上传递过来的勾选父级id:printidforFromlistGetIdUpdataStatus(item,printid,key,is,id)}相关文章：
Element:Cheack多选勾选效果逻辑判断
效果展示 取消子级勾选，父级的勾选效果 代码合集 （1）组件代码 fromlist.cheackType 类型，permissio表示是权限. fromlist:[{id:1,children:[{...}]},...]传递的数据大致结构 <!-- 操作权限 --><template v-if"…...
从摄像头到 RAW 数据：MJPEG 捕获与验证
从摄像头捕获 MJPEG 原始数据：完整指南与验证方法 🔍 引言 MJPEG（Motion JPEG）是一种常见的视频压缩格式，广泛应用于摄像头、监控系统和嵌入式设备。在某些场景下，我们需要直接从摄像头获取 MJPEG 原始数据…...
【展位预告】正也科技将携营销精细化管理解决方案出席中睿营销论坛
在医药行业面临政策深化、技术迭代、全球化竞争的多重挑战下，第二届中睿医药健康生态生长力峰会暨第三十五届中睿医药营销论坛将于广州盛大启幕。5月19-20日本次峰会以“聚焦政策变革、把握产业趋势、构建生态共赢”为核心，旨在通过全产业链资源整合与创…...
记录 Flink jdbc、mysql-cdc 连接 mysql8 碰到的适配问题
前言 记录 Flink jdbc、mysql-cdc 连接 mysql8 碰到的小问题 版本 Flink 1.15.3mysql-cdc 2.3.0MySQL 8.0.27 cdc_mysql2mysql MySQL5 之前主要用 MySQL5 ，下面是 MySQL5 的 sql ,具体见 Flink MySQL CDC 使用总结 set yarn.application.namecdc_mysql2mysql;…...
TCP概念+模拟tcp服务器及客户端
目录 一、TCP基本概念 二、ser服务器代码 三、cil客户端代码 一、TCP基本概念 TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层协议。以下是TCP的一些基本概念： 面向连接&…...
高翔《视觉SLAM十四讲》第七章视觉里程计3d-2d位姿估计代码详解与理论解析
高翔《视觉SLAM十四讲》第七章代码详解与理论解析 一、三维空间位姿估计核心算法实现 在视觉SLAM领域，3D - 2D位姿估计是确定相机在三维空间中位置和姿态的关键技术。本部分将详细解析其工程实现框架，同时说明代码模块的划分逻辑。 代码整体结构清晰，各模块分工明确，主要…...
Elasticsearch 内存使用指南
作者：来自 Elastic Valentin Crettaz 探索 Elasticsearch 的内存需求以及不同类型的内存统计信息。 Elasticsearch 拥有丰富的新功能，帮助你为你的使用场景构建最佳搜索解决方案。浏览我们的示例笔记本了解更多信息，开始免费云试用࿰…...
【Stable Diffusion】原理详解：从噪声到艺术的AI魔法
引言 Stable Diffusion是 stability.ai 开源的图像生成模型，是近年来AI生成内容（AIGC）领域最具突破性的技术之一。它通过将文本描述转化为高分辨率图像，实现了从“文字到视觉”的创造性跨越。其开源特性与高效的生成能力ÿ…...
：消息传递（Message Passing）)
并发设计模式实战系列(9)：消息传递（Message Passing）
🌟 大家好，我是摘星！ 🌟 今天为大家带来的是并发设计模式实战系列，第九章消息传递（Message Passing），废话不多说直接开始~ 目录 一、核心原理深度拆解 1. 消息传递架构 2. 并发…...
【MCP Node.js SDK 全栈进阶指南】高级篇（3）：MCP 安全体系建设
背景 随着MCP协议在企业和个人应用中的广泛采用，安全性已成为MCP系统设计和开发中不可忽视的核心要素。一个健壮的MCP安全体系不仅能保护敏感数据和用户隐私，还能确保AI模型与外部工具交互的可靠性和完整性。本文将深入探讨MCP TypeScript-SDK的安全体系建设，帮助开发者构建…...
C++智能指针
智能指针是C中用于自动管理动态分配内存的类模板，它们通过在适当的时机自动释放内存来帮助防止内存泄漏。C11引入了以下几种主要的智能指针： 1. std::unique_ptr 独占所有权的智能指针，同一时间只能有一个unique_ptr指向特定对象。 #inclu…...
基于STM32、HAL库的ATECC608B安全验证及加密芯片驱动程序设计
一、简介： ATECC608B是Microchip公司生产的一款安全加密芯片，提供以下主要特性： 基于硬件的高安全性加密算法 ECC P-256加密引擎 SHA-256哈希算法 AES-128加密 真随机数生成器(TRNG) 16KB安全存储空间 IC接口(最高1MHz) 低功耗设计，适合物联网应用 二、硬件接口： ATECC60…...
【安全扫描器原理】ICMP扫描
【安全扫描器原理】ICMP扫描 1.ICMP协议概述2.ping命令3.tracert命令4.ICMP通信实例5.ICMP协议内容6.ICMP扫描的安全性7.ICMP扫描器的原理及优化策略1.ICMP协议概述 ICMP是TCP/IP协议族中的一个重要协议，主要用于在IP主机之间、主机和路由器之间传递控制消息，这些控制消息包…...
前端 AI 开发实战：基于自定义工具类的大语言模型与语音识别调用指南
在人工智能技术快速发展的今天，将大语言模型（LLM）和语音识别（ASR）功能集成到前端应用中，已经成为提升用户体验、打造智能化应用的重要手段。本文将结合一段实际的 AI 工具类代码，详细讲解如何在…...
组件轮播与样式结构重用实验
任务一：使用“Swiper 轮播组件”对自行选择的图片和文本素材分别进行轮播，且调整对应的“loop”、“autoPlay”“interval”、“vertical”属性，实现不同的轮播效果，使用Swiper 样式自定义，修改默认小圆点和被选中小圆…...
（计数）洛谷 P8386 PA2021 Od deski do deski/P10375 AHOI2024 计数 题解
题意 给定 n n n， m m m，求满足以下限制的长度为 n n n 的序列数目： 每个元素在 [ 1 , m ] [1,m] [1,m] 之间；一次操作定义为删除一个长度至少为 2 2 2 且区间两端相等的区间，该序列需要在若干次操作内被删空。 …...
基于C++数据结构双向循环链表实现的贪吃蛇
大二上数据结构I-课程设计 1.设计思路 建模：程序界面是一个二维平面图蛇：蛇的身体可以看作是链表的节点，当蛇吃到食物时，就增加一节链表节点食物：相应地在边界内随机生成蛇的移动：取得上下左右键的ASCII码…...
H3C ER3208G3路由实现内网机器通过公网固定IP访问内网服务器
内网机器可以通过内网访问服务器；公网机器可以通过公网固定IP访问服务器；但内网机器无法通过公网固定IP访问内网服务器；想实现内网机器通过公网固定IP访问内网服务器 WEB登录管理后台，网络设置->NAT配置，选“高级配…...
Vue3+Three JS高德地图自定义经纬度实现围栏
Vue3实现代码 index.html需要引入three.js <script src"https://cdn.jsdelivr.net/npm/three0.142/build/three.js"></script> 围栏组件 <template><div id"mapContainer" ref"mapContainer"></div> </templ…...
远程访问你的家庭NAS服务器：OpenMediaVault内网穿透配置教程
文章目录 前言1. OMV安装Cpolar工具2. 配置OMV远程访问地址3. 远程访问OMV管理界面4. 固定远程访问地址 前言 在这个数据爆炸的时代，无论是管理家人的照片和视频，还是企业老板处理财务报表和技术文档，高效的数据管理和便捷的文件共享已经变得…...
4.2.3 MYSQL事务原理分析
文章目录 4.2.3 MYSQL事务原理分析1. 事务1. 前提：并发连接访问2. 事务定义3. 事务语句：4. acid特性5. undolog-回滚日志6. redolog-重做日志 2. 隔离级别1. 四种隔离级别2. 并发问题解释3. 隔离级别设置 3. MVCC(Multiversion Concurrency Control&…...
极狐GitLab 如何使用文件导出迁移项目和群组？
极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 用文件导出迁移项目和群组 (FREE ALL) 推荐使用 直接传输 迁移群组和项目。然而，在某些情况下，您可能…...
Linux/AndroidOS中进程间的通信线程间的同步 - 管道和FIFO
前言 管道是 UNIX 系统上最古老的 IPC 方法，它在 20 世纪 70 年代早期 UNIX 的第三个版本上就出现了。管道为一个常见需求提供了一个优雅的解决方案：给定两个运行不同程序的进程，在 shell 中如何让一个进程的输出作为另一个进程的输入呢&…...
第十六届蓝桥杯 2025 C/C++组 破解信息
目录 题目： 题目描述： 题目链接： 思路： 思路详解： 代码： 代码详解： 题目： 题目描述： 题目链接： P12344 [蓝桥杯 2025 省 B/Python B 第二场] 破解信息…...
[FPGA Video IP] VDMA
Xilinx AXI Video Direct Memory Access IP (PG020) 详细介绍 概述 Xilinx AXI Video Direct Memory Access (AXI VDMA) LogiCORE™ IP 核（PG020）是一个软核 IP，专为视频应用设计，提供在内存与 AXI4-Stream 视频外设之间的高带宽…...
Ubuntu如何查看硬盘的使用情况，以及挂载情况。
在Ubuntu中查看硬盘使用情况及挂载情况，可通过以下命令实现： 一、查看硬盘使用情况 df -h 显示所有挂载文件系统的磁盘空间使用情况（含总容量、已用空间、可用空间等），输出结果以易读格式（如GB、MB&#x…...
第十六届蓝桥杯 2025 C/C++组 脉冲强度之和
目录 题目： 题目描述： 题目链接： 思路： 思路详解： 代码： 代码详解： 题目： 题目描述： 题目链接： P12338 [蓝桥杯 2025 省 B/Python B 第二场] 脉冲强度…...
23种设计模式-行为型模式之中介者模式（Java版本）
Java 中介者模式（Mediator Pattern）详解 🧠 什么是中介者模式？ 中介者模式是一种行为型设计模式，它通过定义一个中介者对象来封装一组对象之间的交互。中介者使得各个对象不需要显式地知道彼此之间的关系，…...
集群与存储-lvs-nat实验
一、实验目的 1、熟练掌握ipvsadm 指令的使用 2、理解lvs 负载均衡的原理 3. 熟练掌握lvs-netnfs的配置 二、实验内容 1.拓扑图 2.实验步骤 #在节点服务器中添加网卡，选择仅主机模式 #查看网卡 #启用网卡 nmcli device up ens224 ip a #修改虚拟地址的网关 #…...
Android——Serializable和Parcelable
在Android中传递对象的方式 在 Android 开发中，Parcelable 和 Serializable 是两种用于对象序列化的接口 Serializable public class Student implements Serializable {public int id;public String name;public int age;public Student(int id, String name, i…...
python：sklearn 决策树（Decision Tree）
5. 决策树（Decision Tree） - 第5章 算法思想：基于信息增益（ID3）或基尼不纯度（CART）递归划分特征。 编写 test_dtree_1.py 如下 # -*- coding: utf-8 -*- """ 5. 决策树&…...
0-1背包难题哪家强：回溯法 VS 动态规划 VS 贪心算法
回溯法、动态规划和贪心算法是三种常见的算法设计思想，他们都可以用来解决0-1背包问题，但它们在解决问题的思路、适用条件和效率上存在显著差异。以下从多个维度进行对比分析： 相关系列文章链接: 《贪心算法 vs 动态规划：“急性子…...
JavaSE第12篇：接口interface
一、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings(ignore) import ssl ssl._create_default_https_con…...
一文掌握 npm 基础与常用指令
初学前端？npm 常用指令不熟？想了解 pnpm、yarn、cnpm 有什么不同？ 这篇文章将带你从入门到精通，全面掌握 npm 的使用方法，以及选择适合自己项目的包管理工具！ 文章目录 一、什么是 npm？二、npm …...
OpenObserve API Usage Guide for Log Management
OpenObserve API Usage Guide for Audit Log Management 1. 概述 1.1 目标 本文档旨在详细介绍 OpenObserve 的 API 使用方法，帮助用户通过 API 实现日志管理功能，包括日志摄入、查询、模糊匹配（类似 SQL 的 LIKE）、stream 管理…...
机器学习实操 第一部分 机器学习基础 第5章 支持向量机（SVM）
机器学习实操 第一部分 机器学习基础 第5章 支持向量机（SVM） 内容概要 第5章深入介绍了支持向量机（SVM），这是一种功能强大且应用广泛的机器学习模型。SVM适用于线性或非线性分类、回归以及 novelty detection。本章详…...
跨域请求访问)
CSRF(cross-site request forgery)跨域请求访问
CSRF 当我们在成功登录一个网站后，会将后端返回的cookie数据进行存放，每一次访问该域名都会将cookie存放在请求头，也就相当于用户登录凭证， 但这种同域自动携带cookie存在一种问题 那就是当恶意网站也进去请求时，同样…...
Kafka的Rebalance机制可能引发什么问题？如何优化？怎么减少不必要的Rebalance
Rebalance机制的核心目的是确保每个消费者都能处理适当数量的分区，以实现负载均衡和高可用性。 一般是消费者组发生变化的时候，比如订阅主题，消费者数量等等发生变化，可能会导致rebalance，rebalance会导致消费者组短时…...
【和春笋一起学C++】函数——C++的编程模块
目录 1. 原型句法 2. 函数分类 3. 函数参数之按值传递 4. 数组作为函数参数 在C中，要使用函数，必须要有这三个方面： 函数原型，函数原型描述了函数到编译器的接口，函数原型一般放在include文件中。函数原型告诉编译…...
Java高频面试之并发编程-11
hello啊，各位观众姥爷们！！！本baby今天又来报道了！哈哈哈哈哈嗝🐶 面试官：父子线程如何共享数据？ 在Java中，父子线程共享数据可以通过以下几种方式实现，具体…...
LangChain入门（四） 部署应用程序
1、使用LangServe部署应用程序 安装langserve pip install langserve[all] 代码示例 from fastapi import FastAPI from langchain.chat_models import init_chat_model from langchain_core.messages import SystemMessage, HumanMessage from langchain_core.output_parser…...
精益数据分析（31/126）：电商关键指标深度解析与实战策略
精益数据分析（31/126）：电商关键指标深度解析与实战策略 在创业和数据分析的探索之路上，每一次深入学习都像是解锁了新的技能，让我们离成功更近一步。今天，我依旧带着和大家共同进步的想法，深入…...
【MongoDB篇】MongoDB的集合操作！
目录 引言第一节：集合的“诞生”——自动出现还是手动打造？🤔第二节：集合的“查阅”——看看这个数据库里有哪些柜子？📂👀第三节：集合的“重命名”——给文件柜换个名字！…...
如何使用){kind=spacer}
antd中的表格穿梭框(Transfer)如何使用
穿梭框是什么?怎么使用? 需求如下: 有一组端口需要分配给具体接口 功能要求: 1. 需要展示当前端口名称及其所属的接口 2. 需支持搜索功能可对端口名或接口名进行筛选便于分配 3. 分配端口时,需检测当前接口内的端口是否满足此接口最低要求 4. 提供Select下拉框,可供查…...
联邦学习与安全多方计算的结合是隐私保护机器学习领域
联邦学习（Federated Learning, FL）与安全多方计算（Secure Multi-Party Computation, MPC）的结合是隐私保护机器学习领域的前沿方向，其框架设计需兼顾计算效率、安全性和可扩展性。以下是结合两者的框架设计与实现流程的详细解析： 一、框架设计核心目标 隐私保护：确保多…...
mongoose的介绍，连接数据库
Mongoose 是一个基于 Node.js 的 MongoDB ODM（Object Data Modeling）库，用于在 MongoDB 和 Node.js 应用之间提供结构化的模型层，帮助你更优雅、安全地操作数据库。 🧾 一、Mongoose 简介 📦 功能ÿ…...
Pytest中的fixture装饰器详解
pytest是Python生态中最流行的自动化测试框架，它通过简洁的语法、强大的功能(如fixture、参数化、插件扩展等)和丰富的插件生态，帮助开发者高效完成单元测试、集成测试和端到端测试。fixture是pytest框架中最核心、最强大的功能之一，它提供了…...
Linux系统配置JDK
目录 一、xftp传输JDK包 1、新建xftp会话并连接到我们的服务器 2、上传jdk包 二、配置环境变量 为了方便javaweb项目的建立，我们需要在搭建好的linux环境下配置安装JDK环境 一、xftp传输JDK包 因为jdk包文件比较大了，这时候不能使用简单的linux上传…...
通义千问最新一代大语言模型Qwen3发布了
通义千问Qwen3全面解析：最强开源大模型Ollama本地运行实战 🔥 最新重大好消息！ 经过漫长的等待，今天凌晨阿里云正式发布了Qwen3大语言模型！本次更新带来了0.6b 1.7b 4b 8b 14b 30b 32b 235b超大参数模型，更…...
想做博闻强记的自己
2025年4月29日，13~25℃，还好 待办： 冶金《物理》期末测试 阅卷（冶金《物理》期末测试试卷） 重修《物理》《物理2》电子材料归档 规则变更，《高等数学2》期末试卷推倒重来 遇见：直播画面。 感受…...