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…

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…

燃烧的指针(二)

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

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 采集数据生成…

priority_queue模拟

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

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

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

数据结构与算法——队列

概述 计算机科学中&#xff0c;queue 是以顺序的方式维护的一组数据集合&#xff0c;在一端添加数据&#xff0c;从另一端移除数据。添加的一端称为尾&#xff0c;移除的一端称为头。 功能 插入offer(value : E) : boolean  取值并移除poll() : E  取值peek() : E  判断…

LeetCode 40.组合总和 II

组合总和 II 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含重复的组合。 方法一、回溯 由于题目要求解集…

实体识别与分类方法综述

目录 前言1 实体识别简介2 基于模板和规则的方法3 基于序列标注的方法3.1 常见序列标注模型3.2 模型参数估计和学习问题3.3 常见序列预测模型 4. 基于深度学习的实体识别方法5 基于预训练语言模型的实体识别5.1 BERT、GPT等预训练语言模型5.2 解码策略 6 特殊问题与挑战6.1 标签…

如何提高记忆力?

许多学员经常问我&#xff1a;为什么您的记忆力那么好&#xff1f;有没有什么方法&#xff0c;可以提高记忆力&#xff1f; 今天&#xff0c;我想好好聊聊这个问题。 当然&#xff0c;学习和记忆&#xff0c;是一个巨大的话题。这篇文章只是一个初探。希望能帮你打开一些视野&a…

深入理解Redis:如何设置缓存数据的过期时间及其背后的机制

目录 Redis 给缓存数据设置过期时间 Redis是如何判断数据是否过期的呢&#xff1f; 过期的数据的删除策略 Redis 内存淘汰机制 Redis 给缓存数据设置过期时间 一般情况下&#xff0c;我们设置保存的缓存数据的时候都会设置一个过期时间。为什么呢&#xff1f; 因为内存是有…

电流检测电路设计方案汇总

电流检测电路设计方案&#xff08;一&#xff09; 低端检流电路的检流电阻串联到地&#xff08;图1&#xff09;&#xff0c;而高端检流电路的检流电阻是串联到高电压端&#xff08;图2&#xff09;。两种方法各有特点&#xff1a;低端检流方式在地线回路中增加了额外的线绕电…

​ElasticSearch

目录 简介 基本概念 倒排索引 FST 简介 ES是一个基于lucene构建的&#xff0c;分布式的&#xff0c;RESTful的开源全文搜索引擎。支持对各种类型的数据的索引&#xff1b;搜索速度快&#xff0c;可以提供实时的搜索服务&#xff1b;便于水平扩展&#xff0c;每秒可以处理 …

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-1事件处理

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>事件处理</title> </head><body> <input id"btn" type"button" name"btn" value"提交" /> <…

深入理解ZooKeeper分布式锁

第1章&#xff1a;引言 分布式系统&#xff0c;简单来说&#xff0c;就是由多台计算机通过网络相连&#xff0c;共同完成任务的系统。想象一下&#xff0c;咱们平时上网浏览网页、看视频&#xff0c;背后其实都是一大堆服务器在协同工作。这些服务器之间需要协调一致&#xff…

小游戏选型(二):第三方社交小游戏厂家对比,即构/声网/融云/云信等

前言&#xff1a; 上一篇文章我们主要介绍社交游戏化趋势&#xff0c;并分析了直播平台面临的买量贵、变现难等问题&#xff0c;探讨了小游戏作为新的运营变现玩法的优势。同时还列举了各大直播平台TOP5的小游戏。今天我们继续介绍小游戏系列内容&#xff0c;本文是该系列的第…