vue el-tree 默認展開第一個節(jié)點的實現代碼
vue 的樹形控件 el-tree 可以用來方便地實現樹形控件,但是官方文檔中,關于控件的默認展開只有默認展開全部或者默認全部關閉,如下所示:

對于指定節(jié)點的展開,需要指定其id,從而通過 default-expanded-keys 設置默認展開的節(jié)點。對于后臺返回的數據,默認展開其第一層的第一個,其實很簡單:對于獲取到的后臺數據,將其第一層節(jié)點添加到數組中,將 default-expanded-keys 綁定數組,從而設置默認展開的節(jié)點。實際應用:默認展開第一層節(jié)點中的第一個節(jié)點:
<template> <section> <!-- 機構類型編碼表 --> <el-row 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: { // 獲取樹形結構默認展開節(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 //默認展開第一個節(jié)點 this.getRoleTreeRootNode(this.provincialCenterId) this.listLoading = false }else{ this.$message.error(res) } }) }, }</script>
效果圖:

總結
到此這篇關于vue el-tree 默認展開第一個節(jié)點的實現代碼的文章就介紹到這了,更多相關vue el-tree默認展開節(jié)點內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網!
相關文章:
1. 詳解Android studio 動態(tài)fragment的用法2. 基于android studio的layout的xml文件的創(chuàng)建方式3. 編程語言PHP在Web開發(fā)領域的優(yōu)勢在哪?4. 解決Android studio xml界面無法預覽問題5. 什么是python的自省6. Spring Boot和Thymeleaf整合結合JPA實現分頁效果(實例代碼)7. 圖文詳解vue中proto文件的函數調用8. Android如何加載Base64編碼格式圖片9. Springboot Druid 自定義加密數據庫密碼的幾種方案10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現

網公網安備