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.hqwc.cn/news/433159.html

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

相关文章

WSL2+ubuntu 18+VsCode 配置C/C++开发环境 踩坑

1. 管理员模式打开cmd&#xff0c;或PowerShell &#xff0c;输入 wsl --install 可能出现的错误&#xff1a;无法解析服务器名称或地址 解决方式&#xff1a;科学上网 安装WSL时遇到“无法解析服务器名称或地址”的错误及解决方法 - 知乎 错误2&#xff1a;Error 0x8037…

防火墙组网实验

拓扑 配置IP地址、VLAN AR2&#xff1a;[Huawei]sys ISP [ISP]int LoopBack 0 [ISP-LoopBack0]ip address 1.1.1.1 24 [ISP-LoopBack0]int g0/0/0 [ISP-GigabitEthernet0/0/0]ip address 12.0.0.2 24 [ISP-GigabitEthernet0/0/0]int g0/0/2 [ISP-GigabitEthernet0/0/2]ip addr…

ES文档索引、查询、分片、文档评分和分析器技术原理

技术原理 索引文档 索引文档分为单个文档和多个文档。 单个文档 新建单个文档所需要的步骤顺序&#xff1a; 客户端向 Node 1 发送新建、索引或者删除请求。节点使用文档的 _id 确定文档属于分片 0 。请求会被转发到 Node 3&#xff0c;因为分片 0 的主分片目前被分配在 …

实现负载均衡

1.安装依赖 sudo apt insta11 libgd-dev 2.下载nginx wget http://nginx.org/download/nginx-1.22.1.tar.gz 3.解压nginx tar -zvxf nginx-1.22.1.tar.g2 4.编译安装 cd nginx-1.22.1 5.编译并指定安装位置&#xff0c;执行安装之后会创建指定文件夹/www/env/nginx ./configure…

STM32连接阿里云物联网平台

文章目录 引言一、STM32连接阿里云物联网平台思路二、ESP8266烧录固件三、使用AT指令连接阿里云物联网平台四、STM32环形串口缓冲区驱动程序五、STM32连接阿里云驱动程序 引言 连续写了两篇关于阿里云连接的文章&#xff0c;都是使用Arduino ESP8266 & Arduino ESP32的方式…

mysql 存储过程学习

存储过程介绍 1.1 SQL指令执行过程 从SQL执行的流程中我们分析存在的问题: 1.如果我们需要重复多次执行相同的SQL&#xff0c;SQL执行都需要通过连接传递到MySQL&#xff0c;并且需要经过编译和执行的步骤; 2.如果我们需要执行多个SQL指令&#xff0c;并且第二个SQL指令需要…

【干货】【常用电子元器件介绍】【电阻】(二)--敏感电阻器

声明&#xff1a;本人水平有限&#xff0c;博客可能存在部分错误的地方&#xff0c;请广大读者谅解并向本人反馈错误。   电子电路中除了采用普通电阻器外&#xff0c;还有一些敏感电阻器&#xff08;如热敏电阻器、压敏电阻器、光敏电阻器等&#xff09;也被广泛地应用。然而…

vue 样式隔离原理

日常写单文件组件时&#xff0c;会在style添加scoped属性&#xff0c;如<style scoped>&#xff0c;目的是为了隔离组件与组件之间的样式&#xff0c;如下面的例子&#xff1a; <template><p class"foo">这是foo</p><p class"bar&q…

Python算法题集_无重复字符的最长子串

本文为Python算法题集之一的代码示例 题目3&#xff1a;无重复字符的最长子串 说明&#xff1a;给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "a…

少儿编程 2023年12月电子学会图形化编程等级考试Scratch一级真题解析(选择题)

2023年12月scratch编程等级考试一级真题 选择题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 1、观察下列每个圆形中的四个数&#xff0c;找出规律&#xff0c;在括号里填上适当的数 A、9 B、17 C、21 D、5 答案&#xff1a;C 考点分析&#xf…

使用 CDC MinIO 汇入端为 CockroachDB 保持持久数据

CockroachDB 数据库迅速崭露头角&#xff0c;作为一个坚韧且可扩展的分布式 SQL 数据库。它从其昆虫名字的坚持不懈中汲取灵感&#xff0c;即使面对硬件故障&#xff0c;CockroachDB 也能保证高可用性。其分布式架构横跨多个节点&#xff0c;类似于其昆虫原型的适应性。 凭借强…

【RT-DETR有效改进】EfficientFormerV2移动设备优化的视觉网络(附对比试验效果图)

前言 大家好&#xff0c;我是Snu77&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持Re…