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

news2024/9/30 19:32:57

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

在项目中,可能会遇到这种场景,比如权限配置的时候,页面权限和菜单权限以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.coloradmin.cn/o/1913243.html

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

相关文章

OR-3H7-4晶体管光耦,可对标替代TLP281-4等

提供隔离反馈 逻辑电路之间的接口 提供1通道和4通道 电平转换 DC和AC输入 SMPS中的调节反馈电路 消除接地环路 特征 电流传输比&#xff1a;IF 1mA&#xff0c;VCE 5V&#xff0c;Ta 25 C时最小50% 高输入输出隔离电压。&#xff08;VISO3&#xff0c;750Vrms&#xf…

基于Java中的SSM框架实现暖心家装平台系统项目【项目源码+论文说明】

基于Java中的SSM框架实现暖心家装平台系统演示 摘要 自从互联网技术得到大规模的应用以后&#xff0c;传统家装企业面临全新的竞争激烈的市场环境。要想占得当前家装营销与管理的先机&#xff0c;除了要加强内部管理&#xff0c;提高企业内部运营效率&#xff0c;更要积极推进…

【漏洞复现】时空智友ERP——uploadStudioFile——任意文件上传

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 时空智友ERP是专为医药等行业设计的综合性企业资源规划系统&…

Camera Raw:蒙版 - 蒙版叠加

Camera Raw “蒙版”模块中的蒙版叠加 Calibration功能可以帮助用户在调整照片时更好地可视化和管理所选区域&#xff0c;提高照片局部处理过程中的效率。 ◆ ◆ ◆ 使用方法与技巧 1、自动切换叠加 默认情况下启用“自动切换叠加”选项&#xff0c;这样可以使得在绘制蒙版时…

谷粒商城学习笔记-23-分布式组件-SpringCloud Alibaba-Nacos配置中心-简单示例

之前已经学习了使用Nacos作为注册中心&#xff0c;这一节学习Nacos另外一个核心功能&#xff1a;配置中心。 一&#xff0c;Nacos配置中心简介 Nacos是一个易于使用的平台&#xff0c;用于动态服务发现和配置管理。作为配置中心&#xff0c;Nacos提供了以下核心功能和优势&am…

全终端自动化测试框架wyTest

突然有一些觉悟&#xff0c;程序猿不能只会吭哧吭哧的低头做事&#xff0c;应该学会怎么去展示自己&#xff0c;怎么去宣传自己&#xff0c;怎么把自己想做的事表述清楚。 于是&#xff0c;这两天一直在整理自己的作品&#xff0c;也为接下来的找工作多做点准备。接下来…

详细分析Spring中的@Configuration注解基本知识(附Demo)

目录 前言1. 基本知识2. 详细分析3. Demo3.1 简单Bean配置3.2 属性配置3.3 多条件配置 4. 实战拓展 前言 Java的基本知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;Spring框架从入门到学精&#xff08;全&am…

2-1静态库

静态库制作 编写库文件 test.c #include<stdio.h> int main(void){printf("%d\n",add(3,5));return 0; }add.c int add(int a,int b){return ab; }生成.o(目标文件) 用nm查看.o文件 T代表add这个函数的链接性是外部链接&#xff0c;即全局可见&#xff0c;…

03_Shell变量

【Shell】03_Shell变量 一、环境变量 Linux系统配置文件&#xff08;全局配置文件和用户个人配置文件&#xff09;中定义的变量&#xff0c;提供给所有Shell程序使用 1.1、全局环境变量 1.1.1、配置文件位置 /etc/environment /etc/bashrc&#xff08;或者/etc/bash.bashrc…

tensorflow张量生成以及常用函数

张量tensor&#xff1a;多维数组&#xff08;列表&#xff09; 阶&#xff1a;张量的维数 维数 阶 名字 例子 0-D 0 标量 scalar s 1&#xff0c; 2&#xff0c; 3 1-D 1 向量 vector…

Mac VSCode 突然闪退、崩溃、打不开了

1、 思路历程 VSCode 作为前端常用开发工具&#xff0c;其重要性就不一一描述了。 所以 VSCode 突然打不开了&#xff0c;真的是让我一脸懵逼。 本来以为问题不大&#xff0c;于是 &#xff1a; 1、重启了一下VSCode 2、关机重启了一下电脑&#xff1b; 3、清理了一下缓存&am…

阈值分割后配合Connection算子和箭头工具快速知道区域的ID并选择指定区域

代码 dev_close_window () read_image (Image, E:/机器视觉学习/海康视觉平台/二期VM视觉学习/二期VM视觉学习/机器视觉程序/标定相机找圆心和焊头修正相机找圆心之算法软件/标定相机找圆心和焊头修正相机找圆心之算法软件/03 标定相机找圆心/S2/1号机/1.bmp) get_image_size …

Ensp配置防火墙的web界面

Ensp配置防火墙的web界面 准备工作新建网卡配置网卡 启动防火墙配置防火墙注意事项和错误如果云里面没有网卡选项防火墙启动不了没有web界面启动不了没有web界面 准备工作 新建网卡 我用的是win10系统&#xff0c;新建网卡 先右键管理 再点击设备管理器 --- 再网络适配器 接…

【Linux】System V信号量详解以及semget()、semctl()和semop()函数讲解

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

通用个人客户关系管理系统设计

设计一个通用个人客户关系管理系统&#xff08;Personal CRM&#xff09;&#xff0c;旨在帮助个人用户管理他们的社交网络、职业联系人、个人项目和日常沟通&#xff0c;需要关注以下几个核心设计原则和功能模块&#xff1a; 核心设计原则 易用性&#xff1a;界面简洁直观&a…

【操作系统】进程管理——信号量机制(个人笔记)

学习日期&#xff1a;2024.7.9 内容摘要&#xff1a;信号量机制&#xff0c;用信号量实现进程的同步与互斥 信号量机制 信号量的概念 在上节内容中&#xff0c;我们学习了进程互斥的软件和硬件解决方案&#xff0c;但这些方案都有各自的问题&#xff0c;双标志法都因为检查和…

机器人三定律及伦理分析

全世界的机器人定律并没有一个统一的标准或体系&#xff0c;但是在科学文献中&#xff0c;最广为人知的是由科幻小说家阿西莫夫提出的“机器人三定律”。本文将以这些定律为基础&#xff0c;分析现有的机器人伦理和实际应用中的问题&#xff0c;给出若干实例&#xff0c;并对相…

LVS集群及其它的NAT模式

1.lvs集群作用&#xff1a;是linux的内核层面实现负载均衡的软件&#xff1b;将多个后端服务器组成一个高可用、高性能的服务器的集群&#xff0c;通过负载均衡的算法将客户端的请求分发到后端的服务器上&#xff0c;通过这种方式实现高可用和负载均衡。 2.集群和分布式&#…

【光伏仿真系统】光伏设计的基本步骤

随着全球对可再生能源需求的不断增长&#xff0c;光伏发电作为一种清洁、可再生的能源形式&#xff0c;正日益受到重视。光伏设计是确保光伏系统高效、安全、经济运行的关键环节&#xff0c;它涉及从选址评估到系统安装与维护的全过程。本文将详细介绍光伏设计的基本步骤&#…

AI大模型走进汽车车机,智驾将是未来

车机里的AI大模型在汽车行业中的应用越来越广泛&#xff0c;主要体现在智能座舱和自动驾驶系统的深度融合上。通过将AI大模型应用于车机系统&#xff0c;可以实现更高智能化的人车交互体验。AI大模型作为人工智能发展的核心引擎&#xff0c;正在成为汽车智能化发展的关键之一。…