富贵资源网 Design By www.hznty.com
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>
效果图:
总结
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...