在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://www.mzph.cn/bicheng/43939.shtml

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

相关文章

FTP与TFTP

1、TFTP&#xff08;简单文件传输协议&#xff09; TFTP是TCP/IP协议族中一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务。 基于UDP协议 端口号&#xff1a;69 特点&#xff1a;简单、轻量级、易于实现 传输过程&…

人与机器的协同是强弱系统的互补行为

人与机器的协同可以被视作强弱系统的互补行为&#xff0c;这也强调了人类和机器之间在处理问题、执行任务或创造价值时各自的优势与角色。 人类在认知、创造力、情感和伦理等方面具有独特优势。我们能够进行高级的抽象思维、创新和复杂决策&#xff0c;能够处理不确定性和动态环…

《Windows API每日一练》9.13资源-鼠标位图和字符串

鼠标指针位图&#xff08;Mouse Cursor Bitmap&#xff09;是用于表示鼠标指针外观的图像。在 Windows 窗口编程中&#xff0c;可以使用自定义的鼠标指针位图来改变鼠标的外观&#xff0c;并提供更加个性化的用户体验。 ■以下是一些与鼠标指针位图相关的要点&#xff1a; ●…

量产工具一一业务系统(六)

目录 前言 一、代码流程框架 1.业务系统程序流程图 2.业务系统主页面流程图 3.main.c 4.main_page.c 二、处理配置文件 1.配置文件示例 2.处理配置文件 3.config.h 4.config.c 三、生成产品界面 1.计算每个按钮的范围 2.main_page.c 四、处理输入事件 1.main_…

【力扣C语言】每日一题—第121题,买卖股票的最佳时机

题目&#xff1a; 返回获取的最大利润&#xff1a; 这题可浪费时间了&#xff01;&#xff01;&#xff01; 主要是暴力求解超时&#xff01;&#xff01;&#xff01; 最后参考了一下答案 解题思路&#xff1a; 思路一&#xff1a; 暴力求解&#xff1a;两重for循环判断…

【Python实战因果推断】18_线性回归的不合理效果8

目录 Saturated Regression Model Regression as Variance Weighted Average Saturated Regression Model 还记得我在本章开头强调回归和条件平均值之间的相似性吗&#xff1f;我向你展示了使用二元干预进行回归与比较干预组和对照组的平均值是完全一样的。现在&#xff0c;由…

opencv--把cv::Mat数据转为二进制数据的保存和读取

保存 #include <opencv2/opencv.hpp> #include <iostream> #include <fstream>void saveMatToBinary(const cv::Mat& mat, const std::string& filename) {std::ofstream ofs(filename, std::ios::binary);if (!ofs.is_open()) {std::cerr <<…

Python | Leetcode Python题解之第225题用队列实现栈

题目&#xff1a; 题解&#xff1a; class MyStack:def __init__(self):"""Initialize your data structure here."""self.queue collections.deque()def push(self, x: int) -> None:"""Push element x onto stack."&…

LabVIEW机器视觉技术在产品质量检测中有哪些应用实例

LabVIEW的机器视觉技术在产品质量检测中有广泛的应用&#xff0c;通过图像采集、处理和分析&#xff0c;实现对产品缺陷的自动检测、尺寸测量和定位校准&#xff0c;提高生产效率和产品质量。 1. 电子元器件质量检测 在电子制造业中&#xff0c;电子元器件的质量检测是确保产品…

【基于深度学习方法的激光雷达点云配准系列之GeoTransformer】——粗配准

【GeoTransformer系列】——粗配准 1.coarse_matching1.1 概要1.2 功能1.3 超参1.4 input1.5 output2 coarse_target2.1 概要2.2 功能2.3 input2.4 output在模型部分有了初步了解之后, 接下来我们对后续的粗配准、精配准等部分依次进行解读. 本篇主要来看粗配准部分, 代码是在G…

websocket推送消息,模拟推送

上一篇文章&#xff1a;什么是webSocket&#xff1f;以及它的一些相关理论知识 背景&#xff1a; MQTT 的发布/订阅模式与 WebSocket 的双向通信特性相结合。 通过将 MQTT 与 WebSocket 结合使用&#xff0c;可以在 Web 应用中实现高效、实时的消息传输&#xff0c;特别适用于…

算法练习第29天|1005.K次取反后最大化的数组和

1005. K 次取反后最大化的数组和 - 力扣&#xff08;LeetCode&#xff09; 1.题目描述 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个下…

24/7/10总结

flex布局 父项常见属性 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-items:设置侧轴上的子元素的排列方式&#xff08;单行&#xff09; 拉伸要把子盒子里的高度给去掉 如果两个align-items都是center并且主轴是y轴就是这种效果…

Java | Leetcode Java题解之第225题用队列实现栈

题目&#xff1a; 题解&#xff1a; class MyStack {Queue<Integer> queue;/** Initialize your data structure here. */public MyStack() {queue new LinkedList<Integer>();}/** Push element x onto stack. */public void push(int x) {int n queue.size();…

操作系统:信号究竟是什么?如何产生?

OS信号 一、信号的概念二、信号的产生1&#xff09;终端按键产生信号1、 前台进程、后台进程2、验证终端按键是否产生信号 2&#xff09;调用系统函数向进程发信号3&#xff09;硬件异常产生信号1、浮点数溢出&#xff0c;CPU产生信号2 浮点数溢出&#xff0c;产生信号原理3. 空…

Mysql-内置函数

一.什么是函数&#xff1f; 函数是指一段可以直接被另外一段程序调用的程序或代码。 mysql内置了很多的函数,我们只需要调用即可。 二.字符串函数 MySQL中内置了很多字符串函数: 三.根据需求完成以下SQL编写 由于业务需求变更,企业员工的工号,统一为5位数,目前不足5位数的全…

深入浅出Transformer:大语言模型的核心技术

引言 随着自然语言处理&#xff08;NLP&#xff09;领域的不断发展&#xff0c;Transformer模型逐渐成为现代大语言模型的核心技术。无论是BERT、GPT系列&#xff0c;还是最近的T5和Transformer-XL&#xff0c;这些模型的背后都离不开Transformer架构。本文将详细介绍Transfor…

windows驱动开发基础-环境篇

前言 Windows上无论是用户模式下还是内核模式下&#xff0c;有关驱动的开发都有可能影响系统稳定性&#xff0c;所以我们首先要准备一个专用的测试环境&#xff0c;可以使用VM等虚拟机方便环境修复和还原 测试模式 开启测试模式&#xff1a;cmd 命令 bcdedit /set testsign…

量化机器人能否实现无缝交易?

量化机器人通过先进的算法和自动化技术&#xff0c;正在逐步实现无缝交易的目标。这种类型的交易系统设计用于最大限度地减少执行延迟&#xff0c;提高交易效率&#xff0c;并确保交易过程中的高度精确性和一致性&#xff0c;从而在金融市场中提供无缝且高效的交易体验。 无缝…

1.introduce

MkDocs 简介 MkDocs 是一个简单且快速的静态网站生成器&#xff0c;专门用于项目文档。它使用Markdown文件作为内容源&#xff0c;基于Python构建&#xff0c;易于配置和使用。 主要特性 易于安装和使用&#xff1a;通过Python包管理器安装&#xff0c;配置简单。主题支持&…