在vue3中,手写父子关联,勾选子级父级关联,取消只取消当前子级,父节点不动

树形控件选择子级勾选父级,以及所有子级, 取消勾选仅取消子级

在项目中,可能会遇到这种场景,比如权限配置的时候,页面权限和菜单权限以tree的形式来配置,而且不用半选,菜单在页面的下面,转载请说明出处!!!!

比如说只想勾选页面,而不想勾按钮权限的话,这样是实现不了的,这样我们只能自己实现了,当然,如果不闲麻烦的话可以直接在el-tree上设置

check-strictly  设置父子不关联

如果只设置这个属性的话。勾选的子节点不会被选中,关联的父节点也不会被选中

,但是我在这已经给大家做好了直接上代码,有用的话点个赞

这是html部分代码,由于是vue3写的等下我只展示用到的部分代码 

data就是树形图数据

咱就只看check的事件针对做处理就好了

 <el-tree:default-expand-all="true"show-checkboxref="pSelectTree":render-after-expand="false":data="allPermissionDataSource.format":props="treeProps"@check="onPTreeCheck"check-strictlynodeKey="id"></el-tree>

 这个是点击复选框触发的事件,里面用到了两个参数,一个是当前点击的内容,另外用到了

const onPTreeCheck = (_currentData: any, checkData: any) => {// 使用示例//选之前先看之前有没有选中
//setCheckedKeys 是存放选中的keylet flag = lastCheckdKey.value.includes(_currentData.id);// console.log(flag, "iiiii");lastCheckdKey.value = updateCheckedKeys(allPermissionDataSource.value.format,lastCheckdKey.value,_currentData.id,flag);// console.log(lastCheckdKey.value, "lastCheckdKey.value");pSelectTree.value.setCheckedKeys(lastCheckdKey.value);
//设置el-tree选中这些key
};

下面是调用的方法,封装了几个辅助函数

function updateCheckedKeys(treeData, checkedKeys, nodeId, isChecked) {let newCheckedKeys = new Set(checkedKeys);// 辅助函数,用于向上查找并添加所有父节点的IDfunction findParentIds(treeData, currentId=nodeId, includeSelf = true) {  let parentIds = [];  // 辅助函数,递归地查找父节点  function traverseTree(nodes, targetId) {  // console.log(nodes,targetId,'targetId');for (let node of nodes) {  if (node.id === targetId) {  // 如果找到了目标节点,并且需要包含自身,则添加它  if (includeSelf) {  parentIds.unshift(targetId); // 在数组开头添加,以保持顺序  }  // 递归地向上查找父节点  if (node.parentId !== null && node.parentId !== undefined) { // 假设parentId为null或undefined表示没有父节点  traverseTree(treeData, node.parentId); // 注意:这里我们遍历整个treeData来查找parentId,但在实际中可能更高效的方法是使用一个map来存储id到节点的映射  }  return; // 找到后退出循环  }  // 如果当前节点有子节点,则递归检查它们  if (node.children) {  traverseTree(node.children, targetId);  }  }  }  // 从根节点开始遍历树  traverseTree(treeData, currentId);  return parentIds;  
}  // 辅助函数,用于查找并添加所有子节点的IDfunction addChildrenIds(nodeArray, parentId) {for (let node of nodeArray) {// c 输出当前节点的 IDif (node.id === parentId) {//  如果找到匹配的节点,输出信息newCheckedKeys.add(parentId);if (node.children) {for (let child of node.children) {newCheckedKeys.add(child.id);addChildrenIds(node.children, child.id); // 递归地添加子节点的 ID}} else {// 如果节点没有子节点,输出信息}return; // 找到匹配的节点后返回,避免不必要的遍历(但这取决于您是否想继续检查其他节点)}// 如果当前节点没有匹配的子节点,但包含子节点数组,则递归检查这些子节点if (node.children) {addChildrenIds(node.children, parentId);}}//  如果在这一分支中没有找到匹配的节点,输出信息}function removeCheckedKeysAndChildren(nodeArray, nodeIdToRemove) {for (let node of nodeArray) {// 输出当前节点的 IDif (node.id === nodeIdToRemove) {// 如果找到匹配的节点,输出信息newCheckedKeys.delete(nodeIdToRemove);if (node.children) {for (let child of node.children) {newCheckedKeys.delete(child.id);removeCheckedKeysAndChildren(node.children, child.id); // 递归地添加子节点的 ID}} else {// 如果节点没有子节点,输出信息}return; // 找到匹配的节点后返回,避免不必要的遍历(但这取决于您是否想继续检查其他节点)}// 如果当前节点没有匹配的子节点,但包含子节点数组,则递归检查这些子节点if (node.children) {removeCheckedKeysAndChildren(node.children, nodeIdToRemove);}}}if (!isChecked) {// 如果当前节点不在checkedKeys中,则添加它、它的所有父节点及其所有子节点findParentIds(treeData,nodeId); // 先添加所有父节点//父节点关联let parentArr=findParentIds(treeData)for (let i = 0; i < parentArr.length; i++) {newCheckedKeys.add(parentArr[i]);}newCheckedKeys.add(nodeId); // 然后添加当前节点本身addChildrenIds(treeData, nodeId); // 最后添加所有子节点// console.log(newCheckedKeys, "newCheckedKeys");} else {// 如果当前节点在checkedKeys中,则移除它removeCheckedKeysAndChildren(treeData,nodeId);// console.log(newCheckedKeys, "newCheckedKeys");}return [...newCheckedKeys];
}

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Mosh|初学者 SQL 教程

sql文件链接&#xff1a;链接: https://pan.baidu.com/s/1okjsgssdxMkfKf8FEos7DA?pwdf9a9 提取码: f9a9 在mysql workbench 导入 create_databases.sql 文件&#xff0c;下面是运行成功的界面 快捷方式&#xff1a;全部运行可以同时按下controlcommandenter &#xff0c;或者…

WindowsMac共享文件夹设置

共享文件夹设置 共享文件夹设置Windows系统设置步骤一&#xff1a;设置共享文件夹步骤二: 访问共享文件夹 Mac系统中设置共享文件夹步骤一&#xff1a;设置共享文件夹步骤二&#xff1a;访问共享文件夹 小贴士结论 共享文件夹设置 有时需要在多台电脑之间共享文件夹&#xff0…

如何切换手机的ip地址

在数字时代的浪潮中&#xff0c;智能手机已成为我们日常生活中不可或缺的一部分。然而&#xff0c;随着网络安全问题的日益凸显&#xff0c;保护个人隐私和数据安全变得尤为重要。其中&#xff0c;IP地址作为网络身份的重要标识&#xff0c;其安全性与隐私性备受关注。本文将详…

【深度学习(42)】通过vscode使用anaconda的python环境

按ctrlshiftp&#xff0c;选择Python:Select Interpreter 选择anaconda下的python虚拟环境

物联网实战:STM32+ESP8266温湿度数据采集上传Linux服务器与数据库可视化(附代码示例)

摘要: 本文将手把手教你搭建一个完整的物联网数据监控平台&#xff0c;使用STM32采集温湿度数据&#xff0c;通过ESP8266 WiFi模块上传至Linux服务器&#xff0c;并利用Python脚本将数据存储到MySQL数据库&#xff0c;最后实现每日平均值的计算和可视化展示。 关键词: STM32, …

使用Puppeteer进行数据抓取保存为JSON

Puppeteer简介 Puppeteer是由Google Chrome团队开发的一个Node库&#xff0c;它提供了一个高级API来控制Chrome或Chromium的无头版本。Puppeteer能够执行各种任务&#xff0c;包括页面导航、内容抓取、屏幕截图、PDF生成等。 主要特点 无头浏览器控制&#xff1a;无需打开浏…

0010基于免疫遗传算法的配送中心选址

免疫优化算法&#xff08;Immune Optimization Algorithm, IOA&#xff09;在物流配送中心选址中的应用是通过模拟免疫系统的进化过程来解决选址优化问题。物流配送中心选址问题涉及到如何在给定区域内选择最优的位置&#xff0c;以最大化服务覆盖并最小化运输成本。 免疫优化…

使用昇腾芯片进行多卡训推时使用hccl_tools.py为npu分配ip报错问题解决办法

目录 问题描述问题产生原因解决办法最终执行并验证参考网站命令扩展 问题描述 昇腾芯片&#xff08;910b/310p等&#xff09;进行多卡训练或者推理时需要先获取并配置每张npu的ip信息&#xff0c;因此需要执行类似下面问题&#xff1a; python mindformers/tools/hccl_tools.…

【高等数学】第五章知识点:二重积分

文章目录 一. 二重积分的概念与性质1. 二重积分概念2. 二重积分的性质2.1. 不等式性质2.2. 中值定理 二. 二重积分的计算1. 利用直角坐标计算2. 利用极坐标计算3. 利用函数的奇偶性计算4. 利用变量的轮换对称性计算 一. 二重积分的概念与性质 1. 二重积分概念 几何意义&#x…

Skywork-MoE,1460亿MoE模型,采用MoE Upcycling技术

Skywork-MoE&#xff0c;1460亿MoE模型&#xff0c;采用MoE Upcycling技术 原创 每日发现最新LLM 机器之心SOTA模型 2024年06月04日 18:27 北京 &#x1f3c6; 基座模型 ①项目名称&#xff1a;Skywork-MoE ★Skywork-MoE是一款千亿模型&#xff0c;具有1460亿参数、16个专家…

websockt初始化,创建一个webSocket示例

写文思路&#xff1a; 以下主要从几个方面着手写websocket相关&#xff0c;包括以下&#xff1a;什么是webSocket&#xff0c;webSocket的优点和劣势&#xff0c;webSocket工作原理&#xff0c;webSocket握手示例&#xff0c;如何使用webSocket(使用webSocket的一个示例)&#…

uni-app三部曲之三: 路由拦截

1.引言 路由拦截&#xff0c;个人理解就是在页面跳转的时候&#xff0c;增加一级拦截器&#xff0c;实现一些自定义的功能&#xff0c;其中最重要的就是判断跳转的页面是否需要登录后查看&#xff0c;如果需要登录后查看且此时系统并未登录&#xff0c;就需要跳转到登录页&…

数据结构(初阶2.顺序表)

文章目录 一、线性表 二、顺序表 2.1 概念和结构 2.2 分类 2.2.1 静态顺序表 2.2.2 动态顺序表 2.3动态顺序表的实现 1.SeqList.h 2.SeqList.c 打印顺序表 初始化 销毁 增容 尾插 头插 在指定位置之前插入数据 尾删 头删 在指定位置删除数据 3.test.c 一、线性表 线性表&#…

Linux学习——Linux中无法使用ifconfg命令

Linux学习——Linux中无法使用ifconfg命令&#xff1f; &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅…

MemFire Cloud: 一种全新定义后端即服务的解决方案

在这个快节奏的互联网时代&#xff0c;开发者们最希望的就是能够省时省力地完成项目&#xff0c;快速上线。然而&#xff0c;搭建服务、开发接口API、处理各种后端问题&#xff0c;往往让人头疼不已。别担心&#xff0c;现在有了MemFire Cloud&#xff0c;一款为懒人开发者量身…

Flutter-实现物理小球碰撞效果

效果 引言 在Flutter应用中实现物理动画效果,可以大大提升用户体验。本文将详细介绍如何在Flutter中创建一个模拟物理碰撞的动画小球界面,主要代码实现基于集成sensors_plus插件来获取设备的加速度传感器数据。 准备工作 在开始之前,请确保在pubspec.yaml文件中添加senso…

Java版Flink使用指南——合流

大纲 新建工程无界流奇数Long型无界流偶数Long型无界流奇数String型无界流 合流UnionConnect 测试工程代码 在《Java版Flink使用指南——分流导出》中&#xff0c;我们通过addSink进行了输出分流。本文我们将介绍几种通过多个无界流输入合并成一个流来进行处理的方案。 新建工…

使用 Hugging Face 的 Transformers 库加载预训练模型遇到的问题

题意&#xff1a; Size mismatch for embed_out.weight: copying a param with shape torch.Size([0]) from checkpoint - Huggingface PyTorch 这个错误信息 "Size mismatch for embed_out.weight: copying a param with shape torch.Size([0]) from checkpoint - Hugg…

悠律凝声环ringbuds pro开放式耳机:音乐世界的新探索

随着技术发展和生活节奏加快&#xff0c;耳机已经成为了人们日常生活中不可或缺的数码设备。在这样的背景下&#xff0c;悠律凝声环开放式耳机&#xff0c;将高端素皮和编织纹理进行混搭&#xff0c;获得了德国红点奖、美国MUSE缪斯奖等多项国际大奖&#xff0c;展现出时尚与质…

经典双通道比较器LM393、LM393B、LM2903B、LM193、LM293和LM2903介绍及输入输出仿真

前言&#xff1a; LM393 SOP8封装的外观与丝印 LM393出现几十年了&#xff0c;是一款经典的双比较器&#xff0c;非常经典&#xff0c;用的比较多&#xff0c;新的比较器大家也要多关注。 该类型比较器&#xff0c;虽然静态电流较小&#xff0c;但在电池电路中耗电是巨大的&…