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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值