vue el-tree 默认展开第一个节点的实现代码

时间:2021-05-26

vue 的树形控件 el-tree 可以用来方便地实现树形控件,但是官方文档中,关于控件的默认展开只有默认展开全部或者默认全部关闭,如下所示:

对于指定节点的展开,需要指定其id,从而通过 default-expanded-keys 设置默认展开的节点。
对于后台返回的数据,默认展开其第一层的第一个,其实很简单:对于获取到的后台数据,将其第一层节点添加到数组中,将 default-expanded-keys 绑定数组,从而设置默认展开的节点。
实际应用:默认展开第一层节点中的第一个节点:

<template> <section> <!-- 机构类型编码表 --> <el-row class="toolbar" style="width: 20%;height:600px" align="left"> <div class='treeClass'> <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" highlight-current node-key="id" :default-expanded-keys="treeExpandData"> </el-tree> </div> </el-row> </section></template><script>export default { data() { return { treeData:[], //后台返回的tree树列表 treeExpandData:[], //自己定义的用于接收tree树id的数组 provincialCenterId:'', defaultProps: { children: 'item', label: 'name', }, } }, created(){ this.getEquipmentList() }, methods: { // 获取树形结构默认展开节点 getRoleTreeRootNode(provincialCenterId) { this.treeExpandData.push(provincialCenterId) }, //获取tree树列表 getEquipmentList: function(params){ this.listLoading = true this.$api.ckApi.treeList({typeTag:true}).then((res)=>{ if(res.code==200){ this.treeData = res.resultDownload; this.provincialCenterId = this.treeData[0].id //默认展开第一个节点 this.getRoleTreeRootNode(this.provincialCenterId) this.listLoading = false }else{ this.$message.error(res) } }) }, }</script>

效果图:

总结

到此这篇关于vue el-tree 默认展开第一个节点的实现代码的文章就介绍到这了,更多相关vue el-tree默认展开节点内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章