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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 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 tp验证表单与自动填充函数代码
2012/02/22 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
Python functools模块学习总结
2015/05/09 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
求职自荐书范文
2013/12/04 职场文书
集体备课反思
2014/02/12 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Python数据类型最全知识总结
2021/05/31 Python