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.mzph.cn/news/645564.shtml

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

相关文章

prometheus监控RabbitMQ策略

一般用官方的rabbitmq_exporter采取数据即可&#xff0c;然后在普米配置。但如果rabbitmq节点的队列数超过了5000&#xff0c;往往rabbitmq_exporter就会瘫痪&#xff0c;因为rabbitmq_exporter采集的信息太多&#xff0c;尤其是那些队列的细节&#xff0c;所以队列多了&#x…

ubuntu下docker卸载和重新安装

卸载&#xff1a;步骤一&#xff1a;停止Docker服务 首先&#xff0c;我们需要停止正在运行的Docker服务。打开终端&#xff0c;执行以下命令&#xff1a; sudo systemctl stop docker 步骤二&#xff1a;删除Docker安装包 接下来&#xff0c;我们需要删除已经安装的Docker软件…

2024年美赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

[云访谈]熊娟:要把钟煲煲打造成万店级连锁品牌

导读 众所周知&#xff0c;疫情后期餐饮行业的挑战加剧&#xff0c;市场上流传着这样一句话&#xff1a;“餐饮倒闭率达到百分百”。这意味着&#xff0c;在一条街上&#xff0c;可能每个店铺每年都要更换一次老板。 从宏观角度来看&#xff0c;疫情确实对餐饮业造成了重创。…

【服务器GPT+MJ+GPTs】创建部署GPT+MJ+GPTs程序网站

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建GPT+MJ+GPTs】 🌼1. 给服务器添加端口 🌼2. 安装宝塔 🌼3. 安装Docker 🌼4. 安装ChatGPT程序 🌼5. 程序更新 🌼6. 修改端口 | 密码 🌼7. 绑定域名+申请SSL证书 🌺【前言】 相信大家都对openai的产品ch…

JSON-handle工具安装及使用

目录 介绍下载安装简单操作 介绍 JSON-Handle 是一款非常好用的用于操作json的浏览器插件&#xff0c;对于开发人员和测试人员来说是一款很好用的工具&#xff0c;如果你还没有用过&#xff0c;请赶紧下载安装吧&#xff0c;下面是安装过程和具体使用。 下载安装 点击下载JSON…

Flink:快速掌握批处理数据源的创建方法

Flink 社区最近 “基于FLIP-27” 设计了新的 Source 框架 。一些连接器&#xff08;API&#xff09;已迁移到这个新框架。本文介绍了如何使用这个新框架创建批处理源。 它是在为Cassandra实现Flink 批处理源时构建的。如果您有兴趣贡献或迁移连接器&#xff0c;这篇文章非常适合…

2017年认证杯SPSSPRO杯数学建模D题(第二阶段)教室的合理设计全过程文档及程序

2017年认证杯SPSSPRO杯数学建模 D题 教室的合理设计 原题再现&#xff1a; 某培训机构租用了一块如图&#xff08;见附件&#xff09;所示的场地&#xff0c;由于该机构开设了多种门类的课程&#xff0c;所以需要将这块场地通过加入一些隔墙来分割为多个独立的教室和活动区。…

sheng的学习笔记-神经网络

基础知识 基础知识-什么是分类问题 分类问题是根据已有数据&#xff0c;判断结果是正的还是负的&#xff08;1或者0&#xff09;,比如&#xff1a; • 根据肿瘤大小&#xff0c;判断肿瘤是良性的还是恶性的 • 根据客户交易行为&#xff0c;判断是否是恶意用户 • 根据邮件情况…

SAP EXCEL上传如何实现指定读取某一个sheet页(ALSM_EXCEL_TO_INTERNAL_TABLE)

如何读取指定的EXCEL sheet 页签&#xff0c;比如要读取下图中第二个输出sheet页签 具体实现方法如下&#xff1a; 拷贝标准的函数ALSM_EXCEL_TO_INTERNAL_TABLE封装成一个自定义函数ZCALSM_EXCEL_TO_INTERNAL_TABLE 在自定义函数导入参数页签新增一个参数SHEET_NAME 在源代码…

热门技术问答 | 请 GaussDB 用户查收

近年来&#xff0c;Navicat 与华为云 GaussDB 展开一系列技术合作&#xff0c;为 GaussDB 用户提供面向管理开发工具的生态工具。Navicat 现已完成 GaussDB 主备版&#xff08;单节点、多节点&#xff09;和分布式数据库的多项技术对接。Navicat 通过工具的流畅性和实用性&…

k8s 部署 Nginx 并代理到tomcat

一、已有信息 [rootmaster nginx]# kubectl get nodes -o wide [rootmaster nginx]# kubectl get svc NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) AGE kubernetes ClusterIP 10.96.0.1 <none> 443/TCP 2…

jQuery遍历(树遍历)

1、.children&#xff08;&#xff09;: 获得匹配元素集合中每个元素的直接子元素&#xff0c;选择器选择性筛选。 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><script src"jQuery.js"&g…

《WebKit 技术内幕》学习之八(2):硬件加速机制

2 Chromium的硬件加速机制 2.1 GraphicsLayer的支持 GraphicsLayer对象是对一个渲染后端存储中某一层的抽象&#xff0c;同众多其他WebKit所定义的抽象类一样&#xff0c;在WebKit移植中&#xff0c;它还需要具体的实现类来支持该类所要提供的功能。为了完成这一功能&#x…

认识与探索大模型时代的RPA应用及进化(上)

AI Agent当前仍然处于技术爬坡与实验阶段&#xff0c;特别是在企业领域&#xff0c;真正的成熟应用还处于广泛探索与原型验证阶段&#xff0c;离成熟还尚待时日。而同时另外一种在最近几年广受欢迎的自动化解决方案-RPA&#xff08;机器人流程自动化&#xff09;也在LLM时代不断…

类和对象(友元、运算符重载、继承、多态)---C++

类和对象 4.友元4.1全局函数做友元4.2类做友元4.3成员函数做友元 5.运算符重载5.1 加号运算符重载5.1.1成员函数实现运算符重载5.1.2全局函数实现运算符重载 5.2 左移运算符重载5.2.1全局函数实现运算符重载5.2.2成员函数实现运算符重载 5.3 递增/递减运算符重载5.3.1 前置5.3.…

将vue组件发布成npm包

文章目录 前言一、环境准备1.首先最基本的需要安装nodejs&#xff0c;版本推荐 v10 以上&#xff0c;因为需要安装vue-cli2.安装vue-cli 二、初始化项目1.构建项目2.开发组件/加入组件3. 修改配置文件 三、调试1、执行打包命令2、发布本地连接包3、测试项目 四、发布使用1、注册…

德州仪器(TI):市场形势仍不明朗

TI作为模拟芯片大厂龙头&#xff0c;客户超过100,000家&#xff0c;产品上千万种&#xff0c;前10大客户占公司营收5%&#xff0c;前100大产品占公司营收0.1%。客户群庞大且拥有半导体业界最广的产品范围。因此&#xff0c;TI的市场行情展望对整个产业具参考价值。 根据TI公布…

Mediasoup Demo-v3笔记(一)——框架和Nodejs的基本语法

Medisasop Demo的框架 Nodejs基本语法 后记   个人总结&#xff0c;欢迎转载、评论、批评指正

SSH 解析 | 关键参数 | 安全配置

介绍 SSH&#xff08;Secure Shell&#xff09;是一种用于在计算机网络上进行安全远程访问和执行命令的协议。提供加密通信通道&#xff0c;防止敏感信息在传输过程中被窃听或篡改。SSH还支持文件传输和端口转发等功能&#xff0c;使其成为广泛使用的安全远程管理工具。 1. 安…