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>

点击事件代码:

 // 点击访问权限树形控件的事件visitRightUsergetVisitCheckedNodes(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、效果图

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

勤学苦练“prompts“,如沐春风“CodeArts Snap“

前言 CodeArts Snap 上手一段时间了&#xff0c;对编程很有帮助。但是&#xff0c;感觉代码编写的不尽人意。 我因此也感到困惑&#xff0c;想要一份完整的 CodeArts Snap 手册看看。 就在我感觉仿佛"独自彷徨在这条悠长、悠长又寂寥的雨巷"时&#xff0c;我听了大…

JVM系列-7内存调优

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring原理、JUC原理、Kafka原理、分布式技术原理、数据库技术、JVM原理&#x1f525;如果感觉博主的文…

【学网攻】 第(10)节 -- 路由器单臂路由配置

系列文章目录 目录 系列文章目录 文章目录 前言 一、单臂路由是什么&#xff1f; 二、实验 1.引入 实验拓扑图 PC配置 Sw配置 Router配置 实验验证 总结 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交…

Windows打开IE浏览器命令最简单的方法

问题场景&#xff1a; 许多插件或特定版本的系统需要使用ie浏览器来访问&#xff0c;window默认的ie浏览器是被禁用的如何快速打开ie浏览器解决问题 目录 问题场景&#xff1a; 测试环境&#xff1a; 检查环境是否支持&#xff1a; 问题解决&#xff1a; 方法一 方法二 方法…

IO多路复用-epoll

IO多路复用-epoll 1. 概述 epoll 全称 eventpoll&#xff0c;是 linux 内核实现IO多路转接/复用&#xff08;IO multiplexing&#xff09;的一个实现。 epoll是select和poll的升级版&#xff0c;相较于这两个前辈&#xff0c;epoll改进了工作方式&#xff0c;因此它更加高效…

docker之部署青龙面板

青龙面板是一个用于管理和监控 Linux 服务器的工具&#xff0c;具有定时运行脚本任务的功能。在实际情况下也可以用于一些定期自动签到等任务脚本的运行。 本次记录下简单的安装与使用&#xff0c;请提前安装好docker&#xff0c;参考之前的文章。 一、安装部署 1、拉取镜像 # …

MySQL Connect

文章目录 前言一、Connector/C使用1、下载MySQL连接所需库第一种方法第二种方法 2、MySQL库链接3、MySQL接口介绍连接执行sql语句执行查询语句 前言 一、Connector/C使用 MySQL数据库的基础知识我们前面已经学习了&#xff0c;下面我们就开始学习怎么将MySQL数据库和我们学习的…

代码随想录算法刷题训练营day16

代码随想录算法刷题训练营day16&#xff1a;LeetCode(104)二叉树的最大深度 、LeetCode(559)n叉树的最大深度、LeetCode(111)二叉树的最小深度、LeetCode(222)完全二叉树的节点个数 LeetCode(104)二叉树的最大深度 题目 代码 /*** Definition for a binary tree node.* publ…

架构整洁之道-设计原则

4 设计原则 通常来说&#xff0c;要想构建一个好的软件系统&#xff0c;应该从写整洁的代码开始做起。这就是SOLID设计原则所要解决的问题。 SOLID原则的主要作用就是告诉我们如何将数据和函数组织成为类&#xff0c;以及如何将这些类链接起来成为程序。请注意&#xff0c;这里…

c++24.1.26嵌套if语句

嵌套if语句&#xff1a;if语句中的if语句 实践&#xff1a;

2024最新幻兽帕鲁服务器多少钱一个?

幻兽帕鲁服务器多少钱&#xff1f;价格便宜&#xff0c;阿里云4核16G幻兽帕鲁专属服务器32元1个月、66元3个月&#xff0c;4核32G配置113元1个月、339元3个月&#xff1b;腾讯云4核16G14M服务器66元1个月、277元3个月、1584元一年。阿腾云atengyun.com分享阿里云和腾讯云palwor…

BAT学习笔记:详解环境变量及其所有创建方法

文章目录 一、初识环境变量二、什么是环境变量三、为什么需要环境变量四、环境变量的分类五、环境变量的设置 一、初识环境变量 1.windows 的搜索框中输入 查看高级系统设置。点击打开系统属性窗口。 2. 在系统属性窗口中&#xff0c;点击右下方的“环境变量”打开环境变量设…

RHCE第五次作业

1.写一个脚本&#xff0c;完成如下功能 传递一个参数给脚本&#xff0c;此参数为gzip、bzip2或者xz三者之一&#xff1b; (1) 如果参数1的值为gzip&#xff0c;则使用tar和gzip归档压缩/etc目录至/backups目录中&#xff0c;并命名为/backups/etc-20160613.tar.gz&#xff1b; …

OpenGL 入门(一)— 创建窗口

文章目录 前言创建一个窗口视口动态调整输入控制渲染 完整代码 前言 关键词介绍&#xff1a; OpenGL&#xff1a; 一个定义了函数布局和输出的图形API的正式规范。GLFW&#xff1a;一个专门针对OpenGL的C语言库&#xff0c;它提供了一些渲染物体所需的最低限度的接口。它允许…

C#使用RabbitMQ-2_详解工作队列模式

简介 &#x1f340;RabbitMQ中的工作队列模式是指将任务分配给多个消费者并行处理。在工作队列模式中&#xff0c;生产者将任务发送到RabbitMQ交换器&#xff0c;然后交换器将任务路由到一个或多个队列。消费者从队列中获取任务并进行处理。处理完成后&#xff0c;消费者可以向…

C#,打印漂亮杨辉三角形(帕斯卡三角形)的源代码

杨辉 Blaise Pascal 这是某些程序员看完会哭的代码。 杨辉三角形&#xff08;Yanghui Triangle&#xff09;&#xff0c;是一种序列数值的三角形几何排列&#xff0c;最早出现于南宋数学家杨辉1261年所著的《详解九章算法》一书。 欧洲学者&#xff0c;最先由帕斯卡&#x…

VsCode提高生产力的插件推荐-持续更新中

别名路径跳转 自定义配置// 文件名别名跳转 "alias-skip.mappings": { "~/": "/src", "views": "/src/views", "assets": "/src/assets", "network": "/src/network", "comm…

Go语言指针变量

1. 指针变量 区别于C/C中的指针&#xff0c;Go语言中的指针不能进行偏移和运算&#xff0c;是安全指针。 Go语言中的指针3个概念&#xff1a;指针地址、指针类型和指针取值。 1.1. Go语言中的指针 Go语言中的函数传参都是值拷贝&#xff0c;当我们想要修改某个变量的时候&a…

仓储管理系统——软件工程报告(总体设计)③

总体设计 一、需求规定 软件工程仓库存储管理系统的需求规定是确保系统能够满足用户期望、提高工作效率、确保数据安全性和系统可维护性的基石。其涵盖了功能性、性能、数据管理、用户界面和系统可维护性等多个方面。通过严格的验收标准&#xff0c;可以确保系统在实际应用中…

单片机7-10

目录 定时器 按键控制LED流水灯关键代码 定时器时钟关键代码 串口通信 ​编辑串口向电脑发送数据 电脑通过串口控制LED LED点阵屏 LED点阵屏显示图形 LED点阵屏显示动画 DS1302 DS1302时钟显示 DS1302时钟调节 定时器 为什么12MHz的工作周期为一微秒&#xff1a; 12…