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 data
another layer, and data
the inside is the specific data of the currently clicked node.
②The printed result of getNode contains an parent
attribute, which parent
is also the data of the parent node data
. correct neednode-key
data
Attachment: Example of structure printed after getNode call: