elementui 的 tree 组件如何用代码改变某个节点的展开状态
elementui 的 tree 组件如何用代码改变某个节点的展开状态
·
问题: 项目中需要在不点击树节点的情况下让树节点展开,在官方文档里面,只提供了一个默认展开的属性(default-expanded-keys),这个属性接收一个数组,数组里面就是要默认展开的项,但是这个只在最开始有用,后面要想某个节点展开就没有办法了。
解决方式: 官方没有提供展开节点的方法,就只有自己想办法了,我这里是给每一个节点都设置一个id,通过这个 id 拿到dom元素,然后执行click方法模拟点击效果。代码如下:
html部分代码:
<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部分代码:
data(){
return {
treeData:[
{
id:1,
label:'节点1',
children:[
{
id:2,
label:'节点1-1',
},
{
id:3,
label:'节点1-2'
}
]
}
]
}
}
mounted(){
docoument.getElementById('1').click();
}
这样,就可以看到节点1是自动展开的了,在需要改变某个节点展开状态时,通过 document.getElementById(id).click() 的方法就可以实现。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)