vue element ui el-tree 通过子节点反向递归查找父节点

news2024/11/17 19:44:56

今天做了一个项目采用的是element tree组件,要求子父节点不强关联,但是当我点击子节点时,会反向的选择所有的父节点,如下图:
当我点击电话时,往上一层的“电话”和“我的”均为父级以上的节点,全部选中
在这里插入图片描述
实现方法如下,在组件中使用这个方法:
在这里插入图片描述
然后如下是具体实现方式,反向递归查找所有的父级节点:
在这里插入图片描述
实现代码如下:

handleRoleChange(data, checked) {
      if (checked) {
        const ids = this.$refs.tree.getCheckedKeys()
        const getId = this.treeFindPath(this.allPermissions, item => data.id === item.id)
        const newId = new Set([...ids, ...getId])
        this.$refs.tree.setCheckedKeys(newId, false)
      }
    },
    // 递归找tree的父节点
    treeFindPath(tree, func, path = []) {
      if (!tree) return []
      for (const data of tree) {
        // 这里按照你的需求来存放最后返回的内容吧
        path.push(data.id)
        if (func(data)) return path
        if (data.children) {
          const findChildren = this.treeFindPath(data.children, func, path)
          if (findChildren.length) return findChildren
        }
        path.pop()
      }
      return []
    },

分享一下,也方便日后查看。

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

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

相关文章

Practice1|1207. 独一无二的出现次数、1365. 有多少小于当前数字的数字、941. 有效的山脉数组

1207. 独一无二的出现次数 1.题目: 给你一个整数数组 arr,请你帮忙统计数组中每个数的出现次数。 如果每个数的出现次数都是独一无二的,就返回 true;否则返回 false。 示例 1: 输入:arr [1,2,2,1,1,3…

安卓的播放器对比与选型(vlc,EXOplayer,Ijkplayer,GSYVideoPlayer)详细过程

安卓的播放器对比与选型(vlc,EXOplayer,Ijkplayer,GSYVideoPlayer)📺详细过程 前言一、vlc二、EXOplayer三、Ijkplayer四、GSYVideoPlayer🔥🔥🔥五、其他的开源播放器jia…

婚庆服务小程序app开发方案详解

开发一款婚庆行业服务小程序有哪些功能呢? 1、选择分类 选择婚庆、婚车、婚宴、司仪、彩妆、婚庆用品、跟拍、摄影等,筛选出对应的商家 2、选择商家 选择分类后,可以选择商家,查看各个商家的详细介绍情况。 3、选择服务套餐 各…

Linux虚拟机(lvm)报Unmount and run xfs_repair

问题 linux系统没有正常关机,今天启动虚拟机无法进入系统,提示metadata corruption deleted at xxxx; Unmount and run xfs_repair 分析 主机异常掉电后里面的虚拟机无法启动,主要是损坏的分区 解决 看出来应该是dm-0分区损坏…

应急响应经典案例-FTP 暴力破解

应急响应经典案例-FTP 暴力破解 应急场景日志分析应急处理措施 应急场景 从昨天开始,网站响应速度变得缓慢,网站服务器登录上去非常卡,重启服务器就能保证一段时间的正常访问,网站响应状态时而飞快时而缓慢,多数时间是…

华为云安装MySQL后,本地工具连接MySQL失败

华为云安装MySQL后,本地连接失败 排查问题步骤: 在此之前需要在MySQL创建用户,并赋予权限。 1、能否ping通。 在本地命令行(Windows:winR)通过ping命令,ping服务器地址,看能否ping通。不能则需要检查本地…

Redis服务优化

目录 一.Rde高可用 二.Rdies持久化 2.1持久化的功能 2.2Redis 提供两种方式进行持久化 三.RDB持久化 3.1触发条件 3.1.1手动触发 3.1.2自动触发 3.1.3其他自动触发机制 3.1.4执行流程 3.1.5启动时加载 四.AOF持久化 4.1开启AOF 4.2执行流程 4.2.1命令追加(append) 4.2.2文件写…

ThinkPHP8知识详解:安装ThinkPHP8

我们在讲解前面的文章《搭建PHP8集成环境》和《给PHP8和MySQL8添加到环境变量》以后,现在可以正式的安装ThinkPHP8啦、 1、打开phpenv,启动服务,打开昨天新建的tp8.com的目录(D:\phpEnv\www\tp8.com),把里…

LLM系列 | 18 : 如何用LangChain进行网页问答

简介 一夕轻雷落万丝,霁光浮瓦碧参差。 紧接之前LangChain专题文章: 15:如何用LangChain做长文档问答?16:如何基于LangChain打造联网版ChatGPT?17:ChatGPT应用框架LangChain速成大法 今天这篇小作文是LangChain实践专题的第4…

关于element ui 安装失败的问题解决方法并查看是否安装成功

报错信息: 解决办法: 使用命令: npm install --legacy-peer-deps element-ui --save 查看是否安装成功: 方法一:在package.json文件中查看是否有element-ui版本 方法二:查看node_modules目录下是否有elem…

宝塔设置云服务器mysql端口转发,实现本地电脑访问云mysql

环境:centos系统使用宝塔面板 实现功能:宝塔设置云服务器mysql端口转发,实现本地电脑访问mysql 1.安装mysql、PHP-7.4.33、phpMyAdmin 5.0 软件商店》搜索 mysql安装即可 软件商店》搜索 PHP安装7.4.33即可(只需要勾选快速安装&…

Vue 3:玩一下web前端技术(一)

前言 本章内容为VUE前端环境搭建与相关前端技术讨论。 下一篇文章地址: (暂无) 一、环境搭建 1. 安装Node.js Vue是基于Node.js的,因此首先需要安装Node.js。官网地址:Node.js 2. 安装Vue CLI Vue CLI是一个用…

简要介绍 | 自编码器:神经网络中的自我复制艺术

注1:本文系“简要介绍”系列之一,仅从概念上对自编码器进行非常简要的介绍,不适合用于深入和详细的了解。 自编码器:神经网络中的自我复制艺术 Autoencoders Explained - MATLAB & Simulink 一、背景介绍 自编码器&#xff0…

Megatron-LM、NVIDIA NeMo、MegaMolBART 、model_optim_rng.pt 文件是什么?

本文涉及以下几个概念,分别是: Megatron和Megatron-LM-v1.1.5-3D_parallelism NVIDIA NeMo Megatron和Megatron-LM-v1.1.5-3D_parallelism是什么? Megatron是由NVIDIA开发的一种用于训练大规模语言模型的开源框架。它旨在提供高效的分布式…

【C++】堆和栈的区别以及delete和delete[]的区别

文章目录 1、堆和栈2、delete和delete[]的区别 1、堆和栈 堆(Heap)和栈(Stack)是计算机中用于管理内存的两个重要概念。栈Stack:栈是只允许在一端进行插入和删除操作的线性表,允许插入和删除的一端称为栈顶…

Flink回撤流

1.回撤流定义(RetractStream) Flink 的回撤流是指在 Flink 的流处理算法中,撤回已经发送到下游节点的数据。这是因为在实际应用场景中,有些错误数据可能会发送到下游节点,因此需要回撤流以保证数据的准确性。 回撤流…

腾讯会议连接蓝牙耳机没有声音 - 解决方案

手机端 手机端连接蓝牙耳机没有声音 打开腾讯会议的附近设备权限。 电脑端 电脑端连接蓝牙耳机没有声音 问题原因 腾讯会议会自动连接使用蓝牙耳机的麦克风,导致耳机为了同时保证输出输入带宽进入了通讯模式(hands-free),而腾…

Unity《勇士传说》开发日记:如何制作可互动标识

要实现的需求: 在游戏当中,我们的主角走到宝箱前,可以将宝箱打开,走到洞穴口可以进入下一个场景,此时需要有个互动标识来提示用户。如图所示: 当角色走到宝箱前,弹出互动标识提示用户按下E键可…

机器学习深度学习——感知机

👨‍🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——softmax回归的简洁实现 📚订阅专栏:机器学习&&深度学习 希望文章对你们…

用C语言构建一个手写数字识别神经网络

(原理和程序基本框架请参见前一篇 "用C语言构建了一个简单的神经网路") 1.准备训练和测试数据集 从http://yann.lecun.com/exdb/mnist/下载手写数字训练数据集, 包括图像数据train-images-idx3-ubyte.gz 和标签数据 train-labels-idx1-ubyte.…