0


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调用后打印的结构示例:
在这里插入图片描述


本文转载自: https://blog.csdn.net/weixin_43939111/article/details/129872768
版权归原作者 weixin_43939111 所有, 如有侵权,请联系我们删除。

“el-tree使用获取当前选中节点的父节点数据(开发记录)”的评论:

还没有评论