element-ui 树形控件 通过点击某个节点,遍历获取上级的所有父节点和本身节点

1、需求:点击树形控件的某个节点,需要拿到它上级的所有父节点进行操作

2、代码:

树形控件代码

    <el-tree
                            :data="deptOptions"
                            @node-click="getVisitCheckedNodes"
                            ref="target_tree_Speech"
                            node-key="id"
                            :default-expanded-keys="[]"
                            :highlight-current="true"
                            :filter-node-method="filterNodeIndex"
                            :check-strictly="!form.deptCheckStrictly"
                            empty-text="暂无数据"
                            :props="defaultPropsIndex"
                          >
                          </el-tree>

点击事件代码:

 // 点击访问权限树形控件的事件visitRightUser
    getVisitCheckedNodes(node, e) {
      this.visit_id_result = node.id;
      this.visit_result = node.code;
      //所有父节点存放的数组
      this.breadList = [];
      //调用递归函数
      this.getTreeNode(e);
      // 先把当前点击的节点的id先放入数组中,这个可以不放,我做的这个项目需要本身节点和所有父节点
      this.breadList.unshift(e.data.id);
      this.breadList = this.unique(this.breadList);
      // console.log('选中节点的所有父节点', this.breadList);
      this.visit_level = node.level;
      this.visit_name = node.name;
      
      this.$nextTick(() => {
        this.$refs.treeSpeech.setCurrentKey(this.visit_id_result);
      });
    },

获取所有父节点函数代码

 // 递归获取子节点的所有父节点
    getTreeNode(node) {
      //获取当前树节点和其父级节点
      if (node.level == 1) {
        this.breadList.unshift(node.parent.data[0].id);
      } else {
        if (node.parent) {
          if (node.parent.data.id) this.breadList.unshift(node.parent.data.id); //在数组头部添加元素
          this.getTreeNode(node.parent); //递归
        }
      }
    },

3、效果图

点击一病区子节点,获取的就是一病区本身和上级的三个父节点,打印出来的数据如图

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

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

相关文章

javaSSMmysql电影推荐系统03073-计算机毕业设计项目选题推荐(附源码)

目 录 摘 要 Abstract 第1章 前 言 1.1 研究背景 1.2 研究现状 1.3 系统开发目标 第2章 技术与原理 2.1 开发技术 2 2.2 ssm框架介绍 2 2.3 MySQL数据库 2 2.4 B/S结构 2 第3章 需求分析 3.1 需求分析 3.2 系统可行性分析 3.3 项目设计目标与原则 3.4…

阿里云 ACK 云原生 AI 套件中的分布式弹性训练实践

作者&#xff1a;霍智鑫 众所周知&#xff0c;随着时间的推移&#xff0c;算力成为了 AI 行业演进一个不可或缺的因素。在数据量日益庞大、模型体量不断增加的今天&#xff0c;企业对分布式算力和模型训练效率的需求成为了首要的任务。如何更好的、更高效率的以及更具性价比的…

数学建模常见算法的通俗理解(3)

11 Logistic模型&#xff08;计算是/否的概率&#xff09; 11.1 粗浅理解 我们有m张图片&#xff0c;并且获取了这些图片的特征向量的矩阵&#xff0c;我们需要判断这些图片中是否满足我们某个要求&#xff0c;如是否含有猫&#x1f431;这种动物。那么此时我们的每张图片传…

《统计学习方法:李航》笔记 从原理到实现(基于python)-- 第3章 k邻近邻法

文章目录 第3章 k邻近邻法3.1 k近邻算法3.2 k近邻模型3.2.1 模型3.2.2 距离度量3.2.3 k值的选择3.2.4 分类决策规则 3.3 k近邻法的实现&#xff1a;kd树3.3.1 构造kd树3.3.2 搜索kd树 算法实现课本例3.1iris数据集scikit-learn实例kd树:构造平衡kd树算法例3.2 《统计学习方法&a…

Docker中安装 RabbitMQ

1、下载 RabbitMQ 镜像 下载最新版本的镜像&#xff1a; docker pull rabbitmq更多版本的镜像可以访问 Docker 官网&#xff1a;https://hub.docker.com/_/rabbitmq?tabtags 2、创建并运行 RabbitMQ 容器 启动命令&#xff1a; docker run -d -p 15672:15672 -p 5672:567…

Netty Reactor 模式解析

目录 Reactor 模式 具体流程 配置 初始化 NioEventLoop ServerBootstrapAcceptor 分发 Reactor 模式 在刚学 Netty 的时候&#xff0c;我们肯定都很熟悉下面这张图&#xff0c;它就是单Reactor多线程模型。 在写Netty 服务端代码的时候&#xff0c;下面…

『OpenCV-Python|鼠标作画笔』

Opencv-Python教程链接&#xff1a;https://opencv-python-tutorials.readthedocs.io/ 本文主要介绍OpenCV-Python如何将鼠标作画笔绘制圆或者矩形。 示例一&#xff1a;图片上双击的位置绘制一个圆圈 首先创建一个鼠标事件回调函数&#xff0c;鼠标事件发生时就会被执行。鼠标…

php 文件上传

目录 1 php.ini 配置文件的修改 2.系统返回码详解 错误级别 4.上传简单示例 5.php代码简单优化 1 php.ini 配置文件的修改 配置项说明file_uploads on 为 开启文件上传功能&#xff0c; off 为关闭 post_max_size 系统允许的 POST 传参的最大值 &#xff0c;默认 8M upl…

(二十八)ATP应用测试平台——使用electron集成vue3桌面应用程序

前言 Electron 是一个开源的框架&#xff0c;它允许使用 Web 技术&#xff08;HTML、CSS 和 JavaScript&#xff09;构建跨平台的桌面应用程序。通过 Electron&#xff0c;开发者可以使用前端技术栈来创建具有原生应用程序体验的桌面应用。 Electron可以在 Windows、Mac 和 L…

爬虫是什么 怎么预防

爬虫是一种自动化程序&#xff0c;用于从网页或网站中提取数据。它们通过模拟人类用户的行为&#xff0c;发送HTTP请求并解析响应&#xff0c;以获取所需的信息。 爬虫可以用于各种合法用途&#xff0c;如搜索引擎索引、数据采集和监测等。然而&#xff0c;有些爬虫可能是恶意的…

【Web前端实操11】定位实操_照片墙(无序摆放)

设置一个板块&#xff0c;将照片随意无序摆放在墙上&#xff0c;从而形成照片墙。本来效果应该是很唯美好看的&#xff0c;就像这种&#xff0c;但是奈何本人手太笨&#xff0c;只好设置能达到照片墙的效果就可。 代码如下&#xff1a; <!DOCTYPE html> <html lang&…

使用dcdiag 和 netdiag确保域控的复制和网络是健康的

dcdiag 和 netdiag 是 Windows 操作系统中的两个命令行工具&#xff0c;主要用于诊断和验证活动目录&#xff08;Active Directory&#xff09;环境的健康状况&#xff0c;包括复制、连接以及其他网络服务。 以下是如何运行这两个工具的步骤&#xff1a; 运行 dcdiag&#xf…

PMP考试刷题记录20240125

1、所有干系人都在开会讨论一个新项目&#xff0c;该项目预计将在一个月内启动&#xff0c;并持续至少10次迭代&#xff0c;其中一个干系人提到应该有人负责开发和维护产品路线图。谁应该承担这个责任? A.项目经理 B.开发团队 C.ScrumMaster D.产品负责人 答案&#xff1…

推荐HuoCMS多站点多语言CMS系统源码

HuoCMS是一套内容管理系统同时也是一套企业官网建设系统&#xff0c;能够帮过用户快速搭建自己的网站。可以满足企业站&#xff0c;外贸站&#xff0c;个人博客等一系列的建站需求。HuoCMS的优势: 可以使用统一后台管理多个网站的内容&#xff0c;统一维护&#xff0c;不同内容…

[设计模式Java实现附plantuml源码~创建型] 多态工厂的实现——工厂方法模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…

​第20课 在Android Native开发中加入新的C++类

​这节课我们开始利用ffmpeg和opencv在Android环境下来实现一个rtmp播放器&#xff0c;与第2课在PC端实现播放器的思路类似&#xff0c;只不过在处理音视频显示和播放的细节略有不同。 1.压缩备份上节课工程文件夹并修改工程文件夹为demo20&#xff0c;将demo20导入到Eclipse或…

使用Linux SDK客户端向AWS Iot发送数据

参考链接&#xff1a; https://ap-southeast-1.console.aws.amazon.com/iot/home?regionap-southeast-1#/test 此篇文章用于测试&#xff0c;使用Linux SDK客户端向AWS Iot发送数据&#xff0c;准备环境如下&#xff1a; 1、客户端环境准备 1.1 客户端操作系统 虚拟机一台…

上门服务小程序|预约上门服务系统开发有哪些功能?

在现代快节奏的生活中&#xff0c;压力和疲劳常常困扰着我们。为了缓解这种状况&#xff0c;越来越多的人选择去按摩店进行放松。然而&#xff0c;繁忙的工作和家庭责任往往让我们无法抽出时间去按摩店。在这种情况下&#xff0c;上门按摩服务应运而生。而随着科技的发展&#…

Java 集合Map相关面试题

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d7;本文收录于java面试题系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏Rust初阶教程、go语言基…

ifconfig 主机ip url记录

ifconfig 容器Pods相关主机与url信息 一文搞懂网络知识&#xff0c;IP、子网掩码、网关、DNS、端口号_关于ip,网关。端口-CSDN博客 计算机网络知识之URL、IP、子网掩码、端口号_ip地址和url-CSDN博客 阅读看下以上文章 由此可知 1.主机ip 10.129.22.124 10.129.22 是网段…