Problem: In the project, the tree node needs to be expanded without clicking on the tree node. In the official document , only a default expanded attribute (default-expanded-keys) is provided. This attribute receives an array, and the array is to be defaulted. Expanded items, but this is only useful at the beginning, and there is no way to expand a certain node later.
Solution: The official method does not provide a way to expand nodes, so I have to find a way. Here I set an id for each node, get the dom element through this id, and then execute the click method to simulate the click effect. code show as below:
html part code:
<el-tree
:data="treeData"
>
<span :id="data.id" class="custom-tree-node" slot-scope="{node,data}">
<span style="line-height:32px;">{
{node.label}}</span>
</span>
</el-tree>
js part of the code:
data(){
return {
treeData:[
{
id:1,
label:'节点1',
children:[
{
id:2,
label:'节点1-1',
},
{
id:3,
label:'节点1-2'
}
]
}
]
}
}
mounted(){
docoument.getElementById('1').click();
}
In this way, you can see that node 1 is automatically expanded. When you need to change the expanded state of a certain node, you can use the method of document.getElementById(id).click().