vue el-tree 默認(rèn)展開第一個節(jié)點的實現(xiàn)代碼

更新時間：2020年05月15日 15:26:22 作者：齊浩棠.

這篇文章主要介紹了vue el-tree 默認(rèn)展開第一個節(jié)點的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

vue 的樹形控件 el-tree 可以用來方便地實現(xiàn)樹形控件，但是官方文檔中，關(guān)于控件的默認(rèn)展開只有默認(rèn)展開全部或者默認(rèn)全部關(guān)閉，如下所示：

在這里插入圖片描述

對于指定節(jié)點的展開，需要指定其id，從而通過 default-expanded-keys 設(shè)置默認(rèn)展開的節(jié)點。
對于后臺返回的數(shù)據(jù)，默認(rèn)展開其第一層的第一個，其實很簡單：對于獲取到的后臺數(shù)據(jù)，將其第一層節(jié)點添加到數(shù)組中，將 default-expanded-keys 綁定數(shù)組，從而設(shè)置默認(rèn)展開的節(jié)點。
實際應(yīng)用：默認(rèn)展開第一層節(jié)點中的第一個節(jié)點：

<template>
 <section>
  <!-- 機構(gòu)類型編碼表 -->
  <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的數(shù)組
    provincialCenterId:'',
    defaultProps: {
     children: 'item',
     label: 'name',
    },
    }
  },
   created(){
   this.getEquipmentList()
  },
   methods: {
   // 獲取樹形結(jié)構(gòu)默認(rèn)展開節(jié)點
   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 //默認(rèn)展開第一個節(jié)點
      this.getRoleTreeRootNode(this.provincialCenterId)
      this.listLoading = false
     }else{
      this.$message.error(res)
     }
    })
   },
   }
</script>

效果圖：

在這里插入圖片描述

總結(jié)

到此這篇關(guān)于vue el-tree 默認(rèn)展開第一個節(jié)點的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue el-tree默認(rèn)展開節(jié)點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue組件屬性(props)及私有數(shù)據(jù)data解析
這篇文章主要介紹了vue組件屬性(props)及私有數(shù)據(jù)data解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue echarts畫甘特圖流程詳細講解
這篇文章主要介紹了Vue echarts畫甘特圖流程，甘特圖（Gantt chart）又稱為橫道圖、條狀圖(Bar chart)。其通過條狀圖來顯示項目、進度和其他時間相關(guān)的系統(tǒng)進展的內(nèi)在關(guān)系隨著時間進展的情況
2022-09-09
vue setInterval 定時器失效的解決方式
這篇文章主要介紹了vue setInterval 定時器失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)，對vue感興趣的同學(xué)，可以參考下
2021-04-04
15分鐘上手vue3.0(小結(jié))
這篇文章主要介紹了15分鐘上手vue3.0，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時器并不會自動關(guān)閉,需要手動清除,當(dāng)頁面被銷毀時,清除定時器即可,需要的朋友可以參考下
2023-10-10
uni-app獲取當(dāng)前環(huán)境信息的方法
uni-aap提供了異步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2個API獲取系統(tǒng)信息，這篇文章主要介紹了uni-app獲取當(dāng)前環(huán)境信息的相關(guān)知識,需要的朋友可以參考下
2022-11-11
vue增加強緩存和版本號的實現(xiàn)方法
這篇文章主要介紹了vue增加強緩存和版本號的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue中使用matomo進行訪問流量統(tǒng)計的實現(xiàn)
這篇文章主要介紹了Vue中使用matomo進行訪問流量統(tǒng)計的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
使用寶塔面板中Nginx部署前端Vue項目完整步驟
在Kubernetes(K8S)部署前端Vue項目通常會涉及到使用Nginx作為靜態(tài)資源服務(wù)器的一個重要部分,這篇文章主要給大家介紹了關(guān)于使用寶塔面板中Nginx部署前端Vue項目的相關(guān)資料,需要的朋友可以參考下
2024-10-10