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

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

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

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

check-strictly  设置父子不关联

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

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

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

data就是树形图数据

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

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

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

const onPTreeCheck = (_currentData: any, checkData: any) => {
  // 使用示例
  //选之前先看之前有没有选中
//setCheckedKeys 是存放选中的key
  let 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);

  // 辅助函数,用于向上查找并添加所有父节点的ID
  function 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;  
}  
  // 辅助函数,用于查找并添加所有子节点的ID
  function addChildrenIds(nodeArray, parentId) {
    for (let node of nodeArray) {
      // c 输出当前节点的 ID
      if (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) {
      // 输出当前节点的 ID
      if (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.mfbz.cn/a/788682.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot构造超简易QQ邮件服务发送 第二版

目录 追加 邮箱附件 添加依赖 编码 测试 第二版的更新点是追加了 邮箱附件功能 ( 后期追加定时任务 ) 基于SpringBoot构造超简易QQ邮件服务发送(分离-图解-新手) 第一版 追加 邮箱附件 添加依赖 <!-- 电子邮件 --><dependency><groupId>org.spri…

影视行业的人工智能与-【机器学习】:案例分析

欢迎关注小知&#xff1a;知孤云出岫 目录 引言AI和ML在影视行业的当前应用AI和ML对影视行业的未来影响案例研究&#xff1a;AI生成动画视频目标工具和库数据收集模型训练视频生成 结论参考文献 引言 人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09…

java如何实现一个死锁 ?

死锁(Deadlock)是指在并发系统中,两个或多个线程(或进程)因争夺资源而互相等待,导致它们都无法继续执行的一种状态。 一、简易代码 public class DeadlockExample {private static final Object lock1 = new Object();private

Сетунь的24条单播指令

1、Setun模拟器概述 真的&#xff0c;想搞懂一台电脑是怎么运行的&#xff0c;那就搞懂它的指今集是怎么跑的&#xff0c;感觉很离了个大谱的&#xff0c;先看由铁氧体磁芯上的器件组成的RAM&#xff0c;容量为162个9-trit单元&#xff0c;即每个单元为9-trit&#xff0c;每页有…

Kubelet 认证

当我们执行kubectl exec -it pod [podName] sh命令时&#xff0c;apiserver会向kubelet发起API请求。也就是说&#xff0c;kubelet会提供HTTP服务&#xff0c;而为了安全&#xff0c;kubelet必须提供HTTPS服务&#xff0c;且还要提供一定的认证与授权机制&#xff0c;防止任何知…

【PB案例学习笔记】-30动态打开窗口

写在前面 这是PB案例学习笔记系列文章的第30篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

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

用PlantUML和语雀画UML类图

概述 首先阐述一下几个简单概念&#xff1a; UML&#xff1a;是统一建模语言&#xff08;Unified Modeling Language&#xff09;的缩写&#xff0c;它是一种用于软件工程的标准化建模语言&#xff0c;旨在提供一种通用的方式来可视化软件系统的结构、行为和交互。UML由Grady…

HTML 标签简写和全称及其对应的中文说明和实例

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>HTML 标签简写及全称</title><style>…

WSL2编译使用6.6版本内核

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、有什么变化二、下载6.6内核三、开始编译1.安装环境2.开始编译 四、使用1.杀死虚拟机2.防止内核文件3.修改配置文件 总结 前言 最近出了一件不大不小的事&a…

Collection 和 Collections 的区别与用法

Collection 和 Collections 的区别与用法 1、Collection 接口1.1 主要特点1.2 常见方法 2、 Collections 工具类2.1 主要特点2.2 常见方法 3、示例代码3.1 使用 Collection 接口3.2 使用 Collections 工具类 4、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收…

PostgreSQL 里怎样解决多租户数据隔离的性能问题?

文章目录 一、多租户数据隔离的性能问题分析&#xff08;一&#xff09;大规模数据存储和查询&#xff08;二&#xff09;并发访问和锁争用&#xff08;三&#xff09;索引维护成本高&#xff08;四&#xff09;资源分配不均 二、解决方案&#xff08;一&#xff09;数据分区&a…

神经网络构成、优化、常用函数+激活函数

Iris分类 数据集介绍&#xff0c;共有数据150组&#xff0c;每组包括长宽等4个输入特征&#xff0c;同时给出输入特征对应的Iris类别&#xff0c;分别用0&#xff0c;1&#xff0c;2表示。 从sklearn包datasets读入数据集。 from sklearn import darasets from pandas impor…

申请商标用什么颜色:企业和个人申请注册商标攻略!

在申请注册商标到底要用什么颜色&#xff0c;许多初次申请注册主体都不是特别清楚&#xff0c;普推知产商标老杨建议&#xff0c;在一般情况下建议尽量用黑白色&#xff0c;因为商标用黑白色在使用时可以着任何色。 在用黑色申请注册成功&#xff0c;别的主体用其它颜色要在同…

前端javascript中的排序算法之插入排序

插入排序&#xff08;Selection Sort&#xff09;基本思想&#xff1a; 插入排序每次排一个数组项&#xff0c;以此方式构建最后的排序数组。假定第一项已经排序了&#xff0c;接着&#xff0c; 它和第二项进行比较&#xff0c;第二项是应该待在原位还是插到第一项之前呢&#…

类似评论、省市区这种具有层次结构的数据表怎么设计?

业务功能模块 评论、回复模块省市区表 设置一个给每个数据设置一个parent_id 例如&#xff1a; 某个视频下a写了条评论&#xff0c;那a的parent_id就是0;b回复了a&#xff0c;那b的parent_id就是a的id;c回复了b&#xff0c;那c的parent_id就是b的id; 这样&#xff0c;所有评论…

大话光学原理:1.“实体泛光说”、反射与折射

一、实体泛光说 在古希腊&#xff0c;那些喜好沉思的智者们中&#xff0c;曾流传着一个奇妙的设想&#xff1a;他们认为&#xff0c;我们的眼睛仿佛伸出无数触手般的光线&#xff0c;这些光线能向四面八方延伸&#xff0c;紧紧抓住周围的每一个物体。于是&#xff0c;当我们凝视…

Apache部署与配置

概述 介绍 Apache HTTP Server(简称Apache)是Apache的一个开源的网页服务器&#xff0c;它源自NCSAhttpd服务器&#xff0c;并经过多次修改和发展&#xff0c;如今已经成为全球范围内广泛使用的Web服务器软件之一 特点 跨平台&#xff1a;可以运行在几乎所有广泛使用的计算机平…

Java面试八股之描述一下MySQL使用索引查询数据的过程

描述一下MySQL使用索引查询数据的过程 1.解析查询语句与查询优化 用户提交一个 SQL 查询语句&#xff0c;MySQL 的查询解析器对其进行词法分析和语法分析&#xff0c;生成解析树。 查询优化器根据解析树、表结构信息、统计信息以及索引信息&#xff0c;决定是否使用 B树索引…

限流组件都有哪些

限流组件有很多&#xff0c;下面是一些常见的限流组件&#xff1a; 1.Sentinel&#xff1a;轻量级的流量控制、熔断降级组件&#xff0c;适用于分布式系统间的流量控制、负载保护和系统防护。 1.Guava RateLimiter&#xff1a;Google 的 Guava 库提供的限流器&#xff0c;基于令…