el-tree uses to get the parent node data of the currently selected node (development record)

1. Premise

There are two methods on the official website:
Get the node (data) in the Tree component according to the data or key to get the key or data of the node.
My key didn't take effect after setting it up, and the method I used to get it from node

1. HTML part

    <el-tree 
    ref="tree"
    :data="treeData" 
    node-key="id"
    :props="defaultProps" 
    @node-click="handleNodeClick" 
    >
    </el-tree>

2. Data example

data(){
    
    
	return {
    
    
		treeData:[{
    
    
		  id:'11',
          label: '一级 1'
        }, {
    
    
          id:'22',
          label: '一级 2',
          children: [{
    
    
          	id:'221',
            label: '二级 2-1',
          }]
        }]
	}
}

Two, realize

handleNodeClick(node){
    
    
	console.log(node)//node为点击节点绑定的**数据**
	let pNode = this.$refs.tree.getNode(node).parent.data;
	console.log(pNode)//获得点击节点父节点的**数据**
}

The callback event provided by el-tree: @node-click="handleNodeClick". (The method name is self-selected, the original "handleNodeClick" is used here)

Others: ① By printing the result of getNode, it is found that the value of the currently clicked node is not directly displayed in the structure, but is wrapped with dataanother layer, and datathe inside is the specific data of the currently clicked node.
②The printed result of getNode contains an parentattribute, which parentis also the data of the parent node data. correct need
node-keydata

Attachment: Example of structure printed after getNode call:
insert image description here

Guess you like

Origin blog.csdn.net/weixin_43939111/article/details/129872768