el-tree使用获取当前选中节点的父节点数据
更新时间：2023年10月17日 16:05:54 作者：weixin_43939111
本文主要介绍了el-tree使用获取当前选中节点的父节点数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一、前提
官网上有两种办法：
根据 data 或者 key 拿到 Tree 组件中的 node (data) 要获得 node 的 key 或者 data。
我这key设置后没有生效，采用的node获取的方法
1、html部分
<el-tree
ref="tree"
:data="treeData"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
>
</el-tree>
2、data举例
data(){
return {
treeData:[{
id:'11',
label: '一级 1'
}, {
id:'22',
label: '一级 2',
children: [{
id:'221',
label: '二级 2-1',
}]
}]
}
}
二、实现
handleNodeClick(node){
console.log(node)//node为点击节点绑定的**数据**
let pNode = this.$refs.tree.getNode(node).parent.data;
console.log(pNode)//获得点击节点父节点的**数据**
}
el-tree提供的回调事件：@node-click=“handleNodeClick”。（方法名自取，这里用的原来的“handleNodeClick”）
其他：①通过打印getNode结果，发现当前点击节点的值不是直接显示在结构中，而是用data又包裹了一层，data内部才是当前点击节点的具体数据。
②打印出的getNode结果，里面有一个parent属性，同样parent内的data才是父节点的数据
③对于一层结构中的id值，和我绑的node-key对应不上，只有如上述两个data中的id才是我正确需要的
附：getNode调用后打印的结构示例：
到此这篇关于el-tree使用获取当前选中节点的父节点数据的文章就介绍到这了,更多相关el-tree获取当前选中节点的父节点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解Vue打包优化之code spliting，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue 函数调用加括号与不加括号的区别,帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-10-10
Vue3+Vite中不支持require的方式引入本地图片的解决方案
这篇文章主要介绍了Vue3+Vite中不支持require的方式引入本地图片的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
今天小编就为大家分享一篇vue给对象动态添加属性和值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要给大家介绍了关于如何利用vue3仿苹果系统侧边消息提示效果的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2021-12-12
自定义指令是vue中使用频率仅次于组件，其包含bind、inserted、update、componentUpdated、unbind五个生命周期钩子。本文将对vue指令的工作原理进行相应介绍2021-06-06
某些应用场景会给点击事件添加权限，不存在权限就拦截点击事件，有权限就继续正常触发点击事件。这样的效果是如何实现的呢，本文就来和大家详细讲讲2023-02-02
文章详细介绍了Vue Router中的路由匹配语法,包括动态参数、正则约束、可重复参数、可选参数以及敏感与严格选项,这些高级特性使得URL设计更加灵活和精确,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-10-10
el-date-picker日期时间选择器的选择时间限制到分钟级别
文章介绍了如何使用el-date-picker 组件来限制用户选择的时间,禁止选择当前时间的日期及时分,同时允许选择其他日期的全天时分,通过设置 `pickerOptions` 对象的属性,可以实现对日期和时间的精确控制,感兴趣的朋友跟随小编一起看看吧2025-01-01
最新评论