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 相关文章推荐
JS Map 和 List 的简单实现代码
Jul 08 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
JavaScript 反射学习技巧
Oct 16 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
桌面中心(一)创建数据库
2006/10/09 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
理解javascript回调函数
2014/12/28 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
高校教师思想汇报
2014/01/11 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
超市督导岗位职责
2015/04/10 职场文书
2015年教研组工作总结
2015/05/04 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
Python开发五子棋小游戏
2022/04/28 Python