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.rhkb.cn/news/246027.html

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

相关文章

Unity - gamma space下还原linear space效果

文章目录 环境目的环境问题实践结果处理要点处理细节【OnPostProcessTexture 实现 sRGB 2 Linear 编码】 - 预处理【封装个简单的 *.cginc】 - shader runtime【shader需要gamma space下还原记得 #define _RECOVERY_LINEAR_IN_GAMMA】【颜色参数应用前 和 颜色贴图采样后】【灯…

tee漏洞学习-翻译-1:从任何上下文中获取 TrustZone 内核中的任意代码执行

原文&#xff1a;http://bits-please.blogspot.com/2015/03/getting-arbitrary-code-execution-in.html 目标是什么&#xff1f; 这将是一系列博客文章&#xff0c;详细介绍我发现的一系列漏洞&#xff0c;这些漏洞将使我们能够将任何用户的权限提升到所有用户的最高权限 - 在…

WEB安全渗透测试-pikachuDVWAsqli-labsupload-labsxss-labs靶场搭建(超详细)

目录 phpstudy下载安装 一&#xff0c;pikachu靶场搭建 1.下载pikachu 2.新建一个名为pikachu的数据库 3.pikachu数据库配置 ​编辑 4.创建网站 ​编辑 5.打开网站 6.初始化安装 二&#xff0c;DVWA靶场搭建 1.下载DVWA 2.创建一个名为dvwa的数据库 3.DVWA数据库配…

13、Kafka ------ kafka 消费者API用法(消费者消费消息代码演示)

目录 kafka 消费者API用法消费者API使用消费者API消费消息消费者消费消息的代码演示1、官方API示例2、创建消费者类3、演示消费结果1、演示消费者属于同一个消费者组2、演示消费者不属于同一个消费者组3、停止线程不适用4、一些参数解释 代码生产者&#xff1a;MessageProducer…

flutter设置windows是否显示标题栏和状态栏和全屏显示

想要让桌面软件实现全屏和不显示状态栏或者自定义状态栏&#xff0c;就可以使用window_manager这个依赖库&#xff0c;使用起来还是非常方便的&#xff0c;可以自定义显示窗口大小和位置&#xff0c;还有设置标题栏是否展示等内容&#xff0c;也可以设置可拖动区域。官方仓库地…

万界星空科技可视化数据大屏的作用

随着科技的不断发展和进步&#xff0c;当前各种数据化的设备也是如同雨后春笋般冒了出来&#xff0c;并且其可以说是给我们带来了极大的便利的。在这其中&#xff0c;数据大屏就是非常具有代表性的一个例子。 数据大屏的主要作用包括&#xff1a; 数据分析&#xff1a;数据大屏…

【mongoDB】文档 CRUD

目录 1.插入文档 批量插入&#xff1a; 2.查询文档 3.更新文档 4.删除文档 deleteOne() deleteMany() findOneAndDelete() 1.插入文档 可以使用 insert () 方法或者 save() 方法向集合中插入文档 语法如下&#xff1a; db.collection_name.insert(document) collectio…

软考培训机构哪家比较好?各软考培训机构排名如何?

先放上机构测评图 一、机构情况 &#xff08;1&#xff09;主营业务 大多数软考培训机构主要致力于IT培训或者软件行业。这些机构的课程更加专业&#xff0c;因为他们起源于该行业。我相信报考软考的同学大部分也是从事这个行业的。个人认为选择这类机构进行培训会有更多好处…

[C#]winform部署yolov5实例分割模型onnx

【官方框架地址】 https://github.com/ultralytics/yolov5 【算法介绍】 YOLOv5实例分割是目标检测算法的一个变种&#xff0c;主要用于识别和分割图像中的多个物体。它是在YOLOv5的基础上&#xff0c;通过添加一个实例分割模块来实现的。 在实例分割中&#xff0c;算法不仅…

C++输入输出流

输入/输出流类&#xff1a;iostream---------i input&#xff08;输入&#xff09; o output&#xff08;输出&#xff09; stream&#xff1a;流 iostream&#xff1a; istream类&#xff1a;输入流类-------------cin&#xff1a;输入流类的对象 ostre…

Cesium加载地图-高德影像

废话不多说&#xff0c;直接上代码 整体代码 <template><div id"cesiumContainer" style"height: 100vh;"></div><div id"toolbar" style"position: fixed;top:20px;left:220px;"><el-breadcrumb><…

爬虫(一)

1. HTTP协议与WEB开发 1. 什么是请求头请求体&#xff0c;响应头响应体 2. URL地址包括什么 3. get请求和post请求到底是什么 4. Content-Type是什么1.1 简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写,是用于万维网&#xff08;…

【Python】02快速上手爬虫案例二:搞定验证码

文章目录 前言1、不要相信什么验证码的库2、以古诗文网为例&#xff0c;获取验证码1&#xff09;code_result.py2&#xff09;gsw.py 前言 提示&#xff1a;以古诗文网为例&#xff0c;获取验证码&#xff1a; 登录&#xff1a;https://so.gushiwen.cn/user/login.aspx 1、不…

牛刀小试 - C++ 推箱子小游戏

参考文档 C笔记&#xff1a;推箱子小游戏 copy函数 memcpy()函数用法&#xff08;可复制数组&#xff09; 使用memcpy踩出来的坑&#xff0c;值得注意 完整代码 /********************************************************************* 程序名:推箱子小游戏 说明&#x…

无状态应用管理Deployment

无状态应用管理Deployment 1、Deployment介绍 Deployment一般用于部署公司的无状态服务。 格式&#xff1a; apiVersion: apps/v1 kind: Deployment metadata: name: nginx-deployment labels: app: nginx spec: replicas: 3 selector: matchLabels: app: nginx …

2024亚马逊开店教程:开店准备与注册流程指南

随着新一年的到来&#xff0c;亚马逊开启了新一轮的卖家入驻&#xff0c;并且针对新卖家优化了入驻流程&#xff0c;下面为大家简单整理一下最新亚马逊入驻教程&#xff0c;有想要入驻开店的小伙伴速速看过来&#xff01; 一、开店前准备 1、账号环境准备 为了防止账号由于网…

k8s实例

k8s实例举例 &#xff08;1&#xff09;Kubernetes 区域可采用 Kubeadm 方式进行安装。 &#xff08;2&#xff09;要求在 Kubernetes 环境中&#xff0c;通过yaml文件的方式&#xff0c;创建2个Nginx Pod分别放置在两个不同的节点上&#xff0c;Pod使用动态PV类型的存储卷挂载…

Python 数据分析实战——为什么销售额减少?酒卷隆治_案例1

# 为什么黑猫游戏的销售额会减少&#xff1f; # 数据集 DAU : 每天至少来访问一次的用户数据 数据内容 数据类型 字段名 访问时间 string&#xff08;字符串&#xff09; log_data 应用名称 string&#xff08;字符串&#xff09; app_name 用户 ID int&#xff08;数值&…

使用代码取大量2*2像素图片各通道均值,存于Excel文件中。

任务是取下图RGB各个通道的均值及标签&#xff08;R, G&#xff0c;B&#xff0c;Label&#xff09;,其中标签由图片存放的文件夹标识。由于2*2像素图片较多&#xff0c;所以将结果放置于Excel表格中&#xff0c;之后使用SVM对他们进行分类。 from PIL import Image import os …

C++(搜索二叉树)

目录 前言&#xff1a; 1.二叉搜索树 1.1二叉搜索树的定义 1.2二叉搜索树的特点 2.二叉搜索树的实现 2.1框架 2.2查找 2.3插入 2.4删除 1.右子树为空 2.左子树为空 3.左右都不为空 3.递归版本 3.1前序遍历 3.2中序遍历 3.3后续遍历 3.4查找&#xff08;递…