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默认展开节点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决Vue中mounted钩子函数获取节点高度出错问题

    遇到的问题 最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上.问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题. 定位问题 后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是G

  • VUE v-for循环中每个item节点动态绑定不同函数的实例

    一. 业务场景: 一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件 二. 思路 : 按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分 <!-- 多个button组件--> <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAd

  • vue elementUI tree树形控件获取父节点ID的实例

    首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行 TreeStore.prototype.getCheckedNodes = function getCheckedNodes() { var leafOnly = argume

  • 利用vue.js插入dom节点的方法

    本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va

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

    vue 的树形控件 el-tree 可以用来方便地实现树形控件,但是官方文档中,关于控件的默认展开只有默认展开全部或者默认全部关闭,如下所示: 对于指定节点的展开,需要指定其id,从而通过 default-expanded-keys 设置默认展开的节点. 对于后台返回的数据,默认展开其第一层的第一个,其实很简单:对于获取到的后台数据,将其第一层节点添加到数组中,将 default-expanded-keys 绑定数组,从而设置默认展开的节点. 实际应用:默认展开第一层节点中的第一个节点: <te

  • zTree异步加载展开第一级节点的实现方法

    在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true; function onAsyncSuccess(event, treeId) { if (isFirst) { //获得树形图对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取根节点个数,getNodes获取的是根节点的集合 var nodeLi

  • Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    目录 问题重现 需求实现 附:vant之van-collapse无法默认展开某一项的解决方法 总结 问题重现 最近在做项目时,有一个需求是让 van-collapse 下拉折叠面板的第一项默认是展开状态:我使用到了 Vant UI 组件,首先按照官网文档的写法直接引入: <!--下拉折叠面板--> <van-collapse class="collapse" v-model="activeNames" is-link="false&quo

  • vue+element tree懒加载更新数据的示例代码

    vue+element tree懒加载更新数据的示例代码

    使用element tree实现懒加载,更新某一节点的数据 1.tree 懒加载 只需要在el-tree标签上面添加lazy,load属性,load的接收是一个函数.这里贴上官网给出的方法 <el-tree :data="treeList" ref="tree" class="vue-tree" lazy :load="loadNode" :highlight-current="true" :node

  • Vue el-table 默认展开某一行的实例

    目录 Vue el-table 默认展开某一行 el-table 高亮某一行 使用 highlight-current-row 属性 使用 row-class-name Vue el-table 默认展开某一行 需求是在另外一个页面选择IP地址直接到这个页面,并需要默认展开选择的那一行 代码如下: <el-table   border   ref="expandTable"   :data="nodeList">   <el-table-colum

  • vue使用ElementUI时导航栏默认展开功能的实现

    本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr

  • Vue中点击active并第一个默认选中功能的实现

    Vue中点击active并第一个默认选中功能的实现

    在jQuery中: 就是让第一个选中,其他的不选中! 当点击后当前选中,其他不选中. 有一种绕口令:东边的喇嘛买了西边的喇叭 o((⊙﹏⊙))o 在Vue中快速创建与选中 1.遍历出来, 在click中赋值 遍历出来的mx. 2.class进行决定是否显示,一点击就把对应的mx赋到activeName中 3.此时activeName就和mx一模一样的文本,然后返回一个true能显示当前的了 4.把最后一个瑕疵补上, 让第一个默认选中.就是把activeName放一个数值就行了 <template

  • 如何实现vue的tree组件

    如何实现vue的tree组件

    前言 Tree一直是大家熟知的组件,做一些大型的后台管理系统都会用到.使用树组件可以完整的展现其中的层级关系,并具有展开收起选择等交互功能. 效果 节点可以无限的递归延伸 可以展开和收起子节点 如果子节点全部选择对应的父节点也应该选中,反之父节点取消选中对应子节点也需要取消选中 API prop传递data属性,来描述所有的节点的信息 每个节点的配置描述如下 title: 展示的标题 expand 是否展开节点 checked 是否选中节点 children 子节点 以及还有两个event on

  • Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

    在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide. 针对此需求,整理了三种实现方式,大家按实际情况选择. 当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法. 但是,就算使用框架,有些时候还是要用到的,比如: Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候,就要自己实现这个功能啦. 第一种方式:最普通的手动监

随机推荐