vue el-tree 默认展开第一个节点
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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>
效果图:
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)