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

news2024/11/16 13:21:57

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、点击事件代码

   // 点击访问权限树形控件的事件visitRightUser
    getVisitCheckedNodes(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.coloradmin.cn/o/1414287.html

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

相关文章

elasticsearch8的整体总结

es概述 elasticsearch简介 官网: https://www.elastic.co/ ElasticSearch是一个基于Lucene&#xff08;Apache开源全文检索工具包&#xff09;的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java开发的&…

MySQL:数据库索引详解

1、什么是索引&#xff1a; 索引是一种用于快速查询和检索数据的数据结构。常见的索引结构有: B 树&#xff0c; B树和 Hash。 索引的作用就相当于目录的作用。打个比方: 我们在查字典的时候&#xff0c;如果没有目录&#xff0c;那我们就只能一页一页的去找我们需要查的那个字…

基于comsol热黏性声学模块仿真声学超材料的声学特性

研究内容&#xff1a; 传统的声学吸收器被用于具有与工作波长相当的厚度的结构&#xff0c;这在低频范围的实际应用中造成了主要障碍。我们提出了一种基于超表面的完美吸收体&#xff0c;能够在极低频区域实现声波的完全吸收。具有深亚波长厚度至特征尺寸k&#xff1d;223的超…

基于Matlab/Simulink直驱式风电储能制氢仿真模型

接着还是以直驱式风电为DG中的研究对象&#xff0c;上篇博客考虑的风电并网惯性的问题&#xff0c;这边博客主要讨论功率消纳的问题。 考虑到风速是随机变化的&#xff0c;导致风电输出功率的波动性和间歇性问题突出&#xff1b;随着其应用规模的不断扩大以及风电在电网中渗透率…

【洛谷 P7072】[CSP-J2020] 直播获奖 题解(优先队列+对顶堆)

[CSP-J2020] 直播获奖 题目描述 NOI2130 即将举行。为了增加观赏性&#xff0c;CCF 决定逐一评出每个选手的成绩&#xff0c;并直播即时的获奖分数线。本次竞赛的获奖率为 w % w\% w%&#xff0c;即当前排名前 w % w\% w% 的选手的最低成绩就是即时的分数线。 更具体地&am…

Typora 无法导出 pdf 问题的解决

目录 问题描述 解决困难 解决方法 问题描述 Windows 下&#xff0c;以前&#xff08;Windows 11&#xff09; Typora 可以顺利较快地由 .md 导出 .pdf 文件&#xff0c;此功能当然非常实用与重要。 然而&#xff0c;有一次电脑因故重装了系统&#xff08;刷机&#xff09;…

【代码随想录15】110.平衡二叉树 257. 二叉树的所有路径 404.左叶子之和

目录 110. 平衡二叉树题目描述参考代码 257. 二叉树的所有路径题目描述参考代码 404.左叶子之和题目描述参考代码 110. 平衡二叉树 题目描述 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树…

亚马逊测评:卖家如何操作测评,安全高效(自养号测评)

亚马逊测评的作用在于让用户更真实、清晰、快捷地了解产品以及产品的使用方法和体验。通过买家对产品的测评&#xff0c;也可以帮助厂商和卖家优化产品缺陷&#xff0c;提高用户的使用体验。这进而帮助他们获得更好的销量&#xff0c;并更深入地了解市场需求。亚马逊测评在满足…

SAP同步异常4:删除合并特征数据的正确方案CXA01

测试环境VF02过帐报错。 原因&#xff0c;在处理测试环境异常数据ZZECCS时没有找到正确的方法&#xff0c;采用的是数据库直接删除。没有解决程序问题。 在SAP同步异常3&#xff1a;解决合并数据异常 只解决了一个程序问题。 最终解决方案&#xff1a; CXA01 删除ZZECCS表 …

Autodesk AutoCAD 2024:开启无限创意,塑造未来设计

随着科技的飞速发展&#xff0c;设计行业正在经历前所未有的变革。作为设计领域的核心软件&#xff0c;Autodesk AutoCAD 2024以其强大的功能和卓越的性能&#xff0c;引领着设计行业的创新潮流。 AutoCAD 2024不仅继承了前代版本的优点&#xff0c;更在功能和性能上进行了全面…

VMware虚拟机部署Linux Ubuntu系统

本文介绍基于VMware Workstation Pro虚拟机软件&#xff0c;配置Linux Ubuntu操作系统环境的方法。 首先&#xff0c;我们需要进行VMware Workstation Pro虚拟机软件的下载与安装。需要注意的是&#xff0c;VMware Workstation Pro软件是一个收费软件&#xff0c;而互联网中有很…

深度学习-搭建Colab环境

Google Colab(Colaboratory) 是一个免费的云端环境&#xff0c;旨在帮助开发者和研究人员轻松进行机器学习和数据科学工作。它提供了许多优势&#xff0c;使得编写、执行和共享代码变得更加简单和高效。Colab 在云端提供了预配置的环境&#xff0c;可以直接开始编写代码&#x…

快速上手!使用Docker和Nginx部署Web服务的完美指南

前言 Docker是一种容器化技术&#xff0c;它可以将应用程序及其依赖项打包到一个独立的、可移植的容器中。这意味着开发人员可以在任何环境中轻松部署和运行他们的应用程序&#xff0c;而无需担心环境差异和依赖问题。而Nginx则是一款高性能的Web服务器和反向代理服务器&#x…

银行数据仓库体系实践(11)--数据仓库开发管理系统及开发流程

数据仓库管理着整个银行或公司的数据&#xff0c;数据结构复杂&#xff0c;数据量庞大&#xff0c;任何一个数据字段的变化或错误都会引起数据错误&#xff0c;影响数据应用&#xff0c;同时业务的发展也带来系统不断升级&#xff0c;数据需求的不断增加&#xff0c;数据仓库需…

渲染农场哪家好?渲染农场怎么用?

渲染农场也可以叫做分布式并行集群计算系统&#xff0c;这是一种利用现成的CPU、以太网和操作系统构建的超级计算机&#xff0c;它使用主流的商业计算机硬件设备达到或接近超级计算机的计算能力&#xff0c;提供动画、电影、视觉效果以及建筑可视化等渲染服务。 渲染农场哪家…

高防服务器、高防 IP、安全SCDN该如何选择

在日常遇到各种问题中&#xff0c;如果让网络运营人员选择一个自己觉得最让人头痛的是什么问题的话&#xff0c;那么在各种问题中&#xff0c;网络攻击问题无疑名列前茅。一旦业务遭受网络攻击&#xff0c;所面临的损失可能是无法估量的。那有什么解决方案可以有效地防御网络攻…

Linux - 数据流重定向、管道符、环境变量配置文件的加载

概述 想了解Linux编程&#xff0c;shell脚本是绕不开的关键知识点&#xff0c;原计划写一个整篇来分享shell的来龙去脉&#xff0c;但知识点过于繁杂&#xff0c;先分享一下学习shell的准备工作&#xff0c;数据流重定向、管道符、环境变量配置文件的加载&#xff0c;有助于知…

零基础学习数学建模——(三)数学建模备赛要点

本篇博客将详细介绍数学建模备赛要点。 如何学习数学建模 本人曾经担任过学校建模协会的学生教练&#xff0c;经常和各种专业各个年级的学生在一起沟通、聊天。从个人角度来看&#xff0c;我将选择数学建模这条路的人大致分为三类&#xff1a; 1、没有明确目的。这类人选择数…

6.2第三次作业

综合练习&#xff1a;请给openlab搭建web网站 网站需求&#xff1a; 1.基于域名www.openlab.com可以访问网站内容为welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料 和缴费网站&#xff0c;基于&#xff0c;www.openlab.com/data网站…

16.计划任务服务程序

计划任务分为一次性计划任务与长期性计划任务 一次性任务 一次性计划任务只执行一次&#xff0c;一般用于临时的工作需求。 at 可以用at命令实现这种功能&#xff0c;只需要写成"at 时间"的形式就行 如果想要查看已设置好但还未执行的一次性 计划任务&#xff0…