el-tree点击，获取当前节点和其所有子节点的id,el-tree点击获取所有节点id

HuiRonmantic

已于 2024-05-22 10:31:38 修改

阅读量1.1w

点赞数 2

分类专栏： Vue技术栈文章标签： vue.js elementui javascript

于 2021-07-07 14:23:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41346436/article/details/118545549

版权

Vue技术栈专栏收录该内容

66 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue.js和ElementUI环境下，如何在el-tree组件点击事件中，简洁地获取当前选中节点以及其所有子孙节点的ID。详细步骤包括分析el-tree的数据结构，实现点击选中时筛选出所有选中节点的ID，并提供了一个清晰的遍历方法，方便开发者根据实际需求调整并输出控制台查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-tree点击获取所有节点id,再自己做之前查过其他博客，都不是很详细，主要是不简洁，在此写出我的方法

首先展示el-tree的数据结构以及字段，此处是获取后端的动态tree.因此字段有所不同，参考着根据自己实际情况而定
在这里插入图片描述

点击选中，并筛选所有选中的父级，子级，孙子级Id。

   //el-tree树形结构
   <div>
                    <el-tree
                      ref="tree"
                      node-key="id"
                      :data="dataLister"
                      :props="defaultProps"

了解本专栏

超级会员免费看