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获取当前选中节点的父节点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了element-ui在table中如何禁用其中几行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue项目实现换肤功能的一种方案分析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
ant design的table组件实现全选功能以及自定义分页
这篇文章主要介绍了ant design的table组件实现全选功能以及自定义分页，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了VUE中如何动态绑定类名和样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vuei18n 在数组中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了vue如何使用socket与服务端进行通信的相关资料,在Vue中我们可以将Websocket类封装成一个Vue插件,以便全局使用,需要的朋友可以参考下2023-09-09
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通过本文给大家分享vuex 渐进式教程实例代码，从入门级带你慢慢深入使用vuex，感兴趣的朋友一起看看吧2018-11-11
在Vue3中可以使用ref函数来创建一个响应式的变量,通过将ref函数应用于一个组件实例,我们可以获取到该组件的实例对象,这篇文章主要给大家介绍了关于vue3 ref获取组件实例的详细图文教程,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue-cli使用rem,vue自适应，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
解决Vue3 echarts v-show无法重新渲染的问题
这篇文章主要介绍了Vue3 echarts v-show无法重新渲染的问题,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-09-09
最新评论