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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
python海龟绘图实例教程
2014/07/24 Python
在Python中编写数据库模块的教程
2015/04/29 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
基于python实现学生管理系统
2018/10/17 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
详解Python中namedtuple的使用
2020/04/27 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
戴尔美国官网:Dell
2016/08/31 全球购物
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
高等教育专业自荐信范文
2014/03/26 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
数控机床专业自荐信
2014/05/19 职场文书
内勤岗位职责
2015/02/10 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
2015年采购员工作总结
2015/04/27 职场文书
信仰观后感
2015/06/03 职场文书
python实现批量移动文件
2021/04/05 Python
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
python开发的自动化运维工具ansible详解
2021/08/07 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL