element-ui 树形控件 实现点击某个节点获取本身节点和底下所有的子节点数据

1、需求:点击树形控件中的某个节点,需要拿到它本身和底下所有的子节点的id

1、树形控件代码

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

2、点击事件代码

   // 点击访问权限树形控件的事件visitRightUsergetVisitCheckedNodes(node, e) {console.log('!!!', node);this.visit_id_result = node.id;this.visit_result = node.id;this.breadList = [];this.childList = [];this.nodeList = [];console.log('当前点击的节点数据', e);this.getTreeNode(e);//-------------------获取子节点数据函数this.getTreeNodeChild(e);// 把当前点击的节点的id先放入数组中this.breadList.unshift(e.data.id);this.breadList = this.unique(this.breadList);// console.log('节点数据', e);console.log('所有的子节点数据', this.unique(this.childList));this.visit_level = node.level;this.visit_name = node.name;this.get_have_visit_data_user(node.id);this.$nextTick(() => {this.$refs.treeSpeech.setCurrentKey(this.visit_id_result);});},

3、获取子节点函数

 // 递归获取当前选中节点的所有子节点getTreeNodeChild(node) {console.log('当前遍历节点的数据', node);if (node.data.id) {this.childList.unshift(node.data.id);}//获取当前树节点和其子级节点if (node.childNodes.length) {for (let index = 0; index < node.childNodes.length; index++) {this.nodeList.push(node.childNodes[index]);if (node.childNodes[index].data.id) {this.childList.unshift(node.childNodes[index].data.id); //在数组头部添加元素}}}console.log('本身节点加上子节点', this.childList);console.log('下次需要遍历的节点', this.nodeList);if (this.nodeList.length) {this.nodeList.shift();console.log('777', this.nodeList[0]);if (this.nodeList[0] !== undefined) {this.getTreeNodeChild(this.nodeList[0]);}}},

效果图:

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

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

相关文章

Discuz论坛搭建:Linux宝塔面板一键部署,固定地址畅享公网访问

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 安装基础环境二. 一键部署Discuz三. 安装cpolar工具四. 配置域名访问Discuz…

PHP AES加密

PHP AES加密&#xff1a;保护数据安全的重要工具 在数字化时代&#xff0c;数据安全是一个至关重要的问题。随着互联网的普及和信息的快速传播&#xff0c;我们需要采取措施来保护敏感数据。PHP AES加密就是一个强大的工具&#xff0c;它可以帮助我们保护数据的机密性。本文将…

Vue3生命周期 VS Vue2生命周期(小记)

概念&#xff1a;Vue组件实例在创建时要经历一系列的初始化步骤&#xff0c;在此过程中Vue会在合适的时机&#xff0c;调用特定的函数&#xff0c;从而让开发者有机会在特定阶段运行自己的代码&#xff0c;这些特定的函数统称为&#xff1a;生命周期钩子。 规律&#xff1a; 生…

vue3 根据点击位置,实现一个用户头像弹框定位

vue3 根据点击位置&#xff0c;实现一个用户头像弹框定位 需求背景 最近在做直播后台&#xff0c;涉及到对用户的一些操作&#xff0c;比如关注/取关/禁言/踢出直播间。多个地方都要用&#xff0c;需要封装一个弹框组件 效果图 实现过程分析 根据点击元素&#xff0c;获取元…

HTML - 介绍

一.简介 HTML&#xff0c;超文本标记语言&#xff08;HyperText Markup Language&#xff09;&#xff0c;是一种用于创建网页的标准标记语言。我们可以使用HTML建立自己的WEB网站或特定页面。HTML运行在浏览器上&#xff0c;由浏览器解析。 ⚠️注意&#xff1a;HTML文件的后缀…

node学习过程中的终端命令

冷的哥们手真tm冷&#xff0c;打字都是僵的&#xff0c;屮 目录 一、在学习nodejs过程中用到的终端命令总结 一、在学习nodejs过程中用到的终端命令 node -v nvm install 20.11.0 nvm list nvm list available nvm on nvm -v nvm use 20.11.0 node加要运行的js文件路径 ps&a…

Clamp cell 介绍

Clamp cell&#xff08;夹持单元&#xff09;是芯片设计中用于限制电路中某个节点的电压范围的重要电路单元。它的主要目的是确保电路中的信号或电源电压不会超出安全范围&#xff0c;从而保护芯片免受潜在的损坏或性能问题。 电压限制&#xff1a; Clamp cell的主要功能之一是…

HashSet和LinkedHashSet的区别

HashSet和LinkedHashSet之间有什么区别 HashSet和LinkedHashSet都是Java中的集合类&#xff0c;它们都实现了Set接口&#xff0c;所以都具有Set的基本特性&#xff0c;即不包含重复的元素。但是&#xff0c;它们在元素的存储和迭代顺序上有一些区别。 存储方式&#xff1a;Ha…

燃烧的指针(二)

&#x1f308;个人主页&#xff1a;小田爱学编程 &#x1f525; 系列专栏&#xff1a;c语言从基础到进阶 &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于c语言的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到小田代码世界~ &#x…

Centos 虚拟机安装

转自 气质&末雨的博客 Centos 虚拟机安装_centos虚拟机安装教程-CSDN博客

CentOS 7.9 OS Kernel Update 3.10 to 4.19

date: 2024-01-18, 2024-01-26 原 OS Kernel 3.10 升级至 4.19 1.检查默认内核 检查 vmlinuz 版本 [rootlocalhost ~]# grubby --default-kernel /boot/vmlinuz-3.10.0-1160.105.1.el7.x86_64 [rootlocalhost ~]#检查 Linux 内核版本 [rootlocalhost ~]# uname -a Linux loc…

Tree-Shaking 作用和实现原理

一、什么是Tree-shaking Tree-shaking 它的名字来源于通过摇晃&#xff08;shake&#xff09;JavaScript代码的抽象语法树&#xff08;AST&#xff09;&#xff0c;是一种用于优化JavaScript代码的技术&#xff0c;主要用于移除未被使用的代码&#xff0c;使得最终生成的代码包…

大模型应用开发:为产品创建一个AI客服/智能助手

欢迎阅读本系列文章&#xff01;我将带你一起探索如何使用OpenAI API来开发GPT大模型应用。无论你是编程新手还是资深开发者&#xff0c;都能在这里获得灵感和收获。 本文将继续展示AI助手的开发方式&#xff0c;在OpenAPI中它的名字是Assistants。 什么是Assistants&#xf…

Python网络爬虫实战——实验4:Python爬虫代理的使用

【实验内容】 本实验主要介绍在爬虫采集数据的过程中代理的使用。 【实验目的】 1、掌握代理使用的基本场景&#xff1b; 2、解决IP封锁问题&#xff1b; 3、提高爬虫访问效率&#xff1b; 【实验步骤】 步骤1选择代理服务提供商 步骤2配置爬虫使用代理 步骤3 采集数据生成…

Rust复合类型之元组

元组是一个有着固定&#xff08;元素&#xff09;长度的列表&#xff0c;每个元素的类型有可能是不同的。类型和元素都用小括号括起来&#xff0c;它们之间用逗号隔开。例如&#xff1a; fn main() { let itemname: (i32, f64, u8) (500, 6.4, 1); }元组可以使用.来访问其中的…

priority_queue模拟

文章目录 模拟priority_queue性质&#xff1a;成员函数&#xff1a;向上调整、向下调整push/pop/empty/top/size/empty成员变量 仿函数struct和class练习题堆的一些性质 模拟priority_queue 性质&#xff1a; 是容器适配器&#xff1b; 底层逻辑是堆&#xff0c;适配器是vect…

Android MVVM+Clean架构简介

本文主要介绍Android开发中MVVM Clean架构。 一、ViewModel ViewModel 类是一种业务逻辑或屏幕级状态容器。它用于将状态公开给界面&#xff0c;以及封装相关的业务逻辑。 它的主要优点是&#xff0c;它可以缓存状态&#xff0c;并可在配置更改后持久保留相应状态。这意味着在 …

音频筑基:窄带、宽带、超宽带、全带一次说透

音频筑基&#xff1a;窄带、宽带、超宽带、全带一次说透 窄带、宽带、超宽带、全带定义参考资料 音频信号中&#xff0c;经常遇到窄带、宽带等说法&#xff0c;本文进行一个小结归类。 窄带、宽带、超宽带、全带定义 窄带、宽带到全带&#xff0c;总体来说是&#xff0c;指对音…

Android JNI中设置全局的jbyteArray

在JNI的代码文件中声明一个全局变量&#xff0c;用来存储jbyteArray对象。你可以在JNI的头文件中定义该变量。 static jbyteArray globalByteArray;在JNI的某个函数中&#xff0c;将传递的jbyteArray对象赋值给全局变量。 JNIEXPORT void JNICALL Java_com_example_MyClass_set…

【遥感专题系列】影像信息提取之——基于专家知识的决策树分类

可以将多源数据用于影像分类当中&#xff0c;这就是专家知识的决策树分类器&#xff0c;本专题以ENVI中Decision Tree为例来叙述这一分类器。 本专题包括以下内容&#xff1a; 专家知识分类器概述知识&#xff08;规则&#xff09;定义ENVI中Decision Tree的使用 概述 基于知…