在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_…

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

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

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;特别适用于…

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位数的全…

windows驱动开发基础-环境篇

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

旷野之间2 - 如何训练医疗保健小型语言模型(AI-SLM)

​​​​ 在本文中,我们将研究如何针对疾病症状训练一个小型医疗保健语言模型。为此,我们将从HuggingFace获取数据集(用于训练我们的模型):https://huggingface.co/datasets/QuyenAnhDE/Diseases_Symptoms QuyenAnhDE/Diseases_Symptoms 数据集来自 Hugging Face。图片来源…

6.MkDocs附录

安装插件 在 MkDocs 中&#xff0c;插件通常是通过 pip​ 工具安装的。你可以使用以下步骤来安装和配置 MkDocs 插件。 1.使用 pip​ 命令安装你需要的插件。例如 pip install pymdown-extensions‍ 2.更新 mkdocs.yml​ 文件。 ‍ 3.使用 mkdocs serve​ 命令本地预览你…

CentOS6禁止锁屏

在电源中设置后还是会锁屏, 原因是有屏幕保护程序 电源管理都 “从不” 一些AI的回答 在CentOS 6系统中&#xff0c;如果你想要禁用锁屏功能&#xff0c;可以编辑/etc/kbd/config文件。这个文件通常包含了键盘相关的设置&#xff0c;包括密码策略和屏幕锁定选项。 首先打开终…

支持向量机 (support vector machine,SVM)

支持向量机 &#xff08;support vector machine&#xff0c;SVM&#xff09; flyfish 支持向量机是一种用于分类和回归的机器学习模型。在分类任务中&#xff0c;SVM试图找到一个最佳的分隔超平面&#xff0c;使得不同类别的数据点在空间中被尽可能宽的间隔分开。 超平面方…

三级_网络技术_12_路由设计技术基础

1.R1、R2是一个自治系统中采用RIP路由协议的两个相邻路由器&#xff0c;R1的路由表如下图(a)所示&#xff0c;当R1收到R2发送的如下图(b)的(V.D)报文后&#xff0c;R1更新的4个路由表项中距离值从上到下依次为0、3、3、4 那么&#xff0c;①②③④可能的取值依次为()。 0、4、…

List、Map、Set 接口在Java中的存取元素特点

List、Map、Set 接口在Java中的存取元素特点 1、List 接口2、Map 接口3、Set 接口4、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java中&#xff0c;List、Map和Set是三个最常用的集合接口。它们各自有不同的特点和用途&#xff…