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


Posted in Javascript onMay 15, 2020

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

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 默认展开第一个节点的实现代码的文章就介绍到这了,更多相关vue el-tree默认展开节点内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 #Javascript
uni-app从安装到卸载的入门教程
May 15 #Javascript
Vue数据双向绑定原理实例解析
May 15 #Javascript
JavaScript鼠标悬停事件用法解析
May 15 #Javascript
JavaScript enum枚举类型定义及使用方法
May 15 #Javascript
Vue如何基于es6导入外部js文件
May 15 #Javascript
JavaScript onclick事件使用方法详解
May 15 #Javascript
You might like
php定界符
2014/06/19 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
详解javascript遍历方式
2015/11/11 Javascript
javascript实现表单验证
2016/01/29 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
python错误处理详解
2014/09/28 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
python绘制雷达图实例讲解
2021/01/03 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
如何获得EntityManager
2014/02/09 面试题
党员个人剖析材料(四风问题)
2014/10/07 职场文书
会计专业自荐信范文
2019/05/22 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
JavaScript组合继承详解
2021/11/07 Javascript