elementUI tree组件获取当前选择所有数据（含半选中的父节点）数组

最新推荐文章于 2025-09-24 12:41:09 发布
原创 最新推荐文章于 2025-09-24 12:41:09 发布 · 2.1w 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element #tree

本文介绍了一种无需修改源码即可获取Vue树组件中全选和半选节点的方法，通过调用getCheckedKeys()和getHalfCheckedKeys()方法并将结果合并，轻松实现数据收集。

 

网上查了半天，一大堆都说要改源码的，最后发现有方法不用改源码的

获取方法如下

this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())

将getCheckedKeys()和getHalfCheckedKeys()两个方法获取的数据合并就是我们想要的数据了

 

Vue3+ElementPlus el-tree递归获取当前选中节点的所有子节点ID （适用所有场景）
朝花夕拾的博客
07-13 5774
然后说下选中当前节点去获取其节点下的所有子节点的ID问题，网上搜了许多没有合适自己的方法，项目需求是单选，用了父子不关联的方法实现的单选，需要做下控制就是父节点不允许点击的情况下的子节点也不允许点击，这个时候就需要递归算法解决此问题，（递归算法适用所有场景下的获取子节点的数据）第一个参数为ture表示获取子节点下的数据，由于父子不关联，所以取值为空数组。官方提供了这个方法 获取选中节点的数组可以方便我们进行递归实现。设置选中节点后去递归获取选中节点的所有子节点的数据。
Element Tree 点击节点获取所有的父节点
单飞吧的博客
05-12 5188
基础布局，添加 @node-click=“handleNodeClick” <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> handleNodeClick(node) { // 最终的数据 this.breadList = [] // 获取点击当节点的dom的信息 let selectNode = this.$refs.tree.getNode
使用element-ui的el-tree组件查询节点父节点(node-click)
u012394336的博客
04-22 7096
一、前端页面 <template> <div> <el-row > <!-- 查询工具栏--> <el-col > <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> </el-col> </el-row>
Element UI树形选择：TreeSelect层级选择方案
gitblog_00703的博客
09-24 940
在现代Web应用开发中，层级数据选择是常见需求，如组织架构选择、分类目录筛选等场景。Element UI作为基于Vue.js 2.0的UI组件库，虽然未提供独立的TreeSelect组件，但通过[el-tree](https://gitcode.com/gh_mirrors/eleme/element/blob/c345bb453bf11badb4831a6a3f600c9372b3a336/pa...
elementui 的 tree树形控件 获取结点选中和半选中状态值
深渊那支花的博客
02-21 3484
这是elementUI 官网实例。
element-ui el-tree 获取当前选中数据（含半选中的父节点）
猫巷的博客
08-31 7280
当不给el-tree组件设置check-strictly 属性时，默认为false，但是回显会有一些没有选中的节点都勾选上了，怎么解决呢？ 重新回到设置 check-strictly 为 true 时，父子级不互相关联，挨个点击用户体验不好的问题，同时也避免了出现半选的情况。 需要简化用户操作: (1)当点击复选框勾选父节点时，其父节点子节点会统一跟随选中，为选中状态 (1)当点击复选框勾选取消选中时，其父节点子节点会统一跟随为未选中状态 el-tree 标签属性 node-key：每个树节点用.
如何获取懒加载后的el-tree全部数据，基于dom结构反推出数据结构
m0_46750297的博客
07-08 1617
如何获取懒加载后的el-tree全部数据，基于dom结构反推出数据结构
vue elementUI tree树形控件获取父节点ID的实例
10-18
当我们需要在Element UI的Tree组件中获取被选中节点的父节点ID时，需要通过一些编程技巧来实现。本篇文章主要就这一问题给出一个具体实现的实例。 Element UI的Tree组件提供了多种方法来处理节点数据，其中包括获取...
Vue ElementUI tree组件 动态渲染编辑时 选择父级时会全选所有的子级（el-tree数据回显父节点和子节点都会被选中）
z00001993的博客
04-24 5702
问题描述： 当el-tree 需要从后台拿到数据动态展示出来时，会出现一个父节点下面的所有子节点全部被勾选了，如图： 解决方案： <el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="...
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
elementui树组件怎么选中数据往上获取父数据
最新发布
11-15
根据用户需求，用户想要在ElementUI树组件中，当选中某个节点数据后，能够向上获取其父节点的数据。从提供的引用中，引用[2]提到了使用`el-tree`组件，并通过`node-key`设置节点的唯一标识，同时使用`ref`来获取树...
element树形控件获取选中的id和半选中的id
weixin_51490706的博客
12-09 739
element树形控件获取选中的id和半选中的id 下面展示一些 内联代码片。 this.$refs.edittree.getCheckedKeys() //获取选中的节点 this.$refs.edittree.getHalfCheckedKeys() //获取半选中的节点
elementui el-tree 父级状态为半选时获得父级id
爱情的错的博客
10-13 492
this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
element-ui el-tree组件获取当前选择所有选中（check）和半选中（indeterminate）的节点
我总是词不达意的博客
10-07 5888
element-ui el-tree组件获取当前选择所有选中和半选中的节点
Element ui tree树形控件获取当前节点id和父节点id
热门推荐
weixin_53587375的博客
03-04 1万+
方法一： 直接在el-tree单击时获取当前节点node，会接收三种参数，分别是当前data节点数据，node当前节点，root根节点数据，我们获取当前node节点即可，通过node.parent可获取父节点数据，祖先级可一层层遍历上去node.parent.parent获取。 let oriFatherId = node.parent.parent.data // 祖父节点信息 let fatherId = node.parent.data // 父节点信息 方法二： 可通过单击获取当前节点id
element-ui的el-tree组件实现单选功能及选择子节点，获取所有父级节点或选中所有父级节点
我总是词不达意的博客
11-08 1万+
element-ui的el-tree组件实现单选功能及选择子节点，获取所有父级节点或选中所有父级节点
element UI中实现tree树形控件部分选中时父级节点也被选中
TTong_190502的博客
07-25 3830
vue + element UI中实现tree树形控件部分选中时父级节点也被选中，以及回显问题处理
vue elementui el-tree 获取当前选中节点的值 一种是获取id的数组 一种是获取id、lable的数组
qq_27806371的博客
07-25 5282
【代码】vue elementui el-tree 获取当前选中节点的值 一种是获取id的数组 一种是获取id、lable的数组。
vue el-tree将选中的节点以tree结构形式数组返回
m0_37850275的博客
05-09 1331
【代码】vue el-tree将选中的节点以tree结构形式数组返回。
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值