vue el-tree 默認(rèn)展開(kāi)第一個(gè)節(jié)點(diǎn)的實(shí)現(xiàn)代碼
vue 的樹(shù)形控件 el-tree 可以用來(lái)方便地實(shí)現(xiàn)樹(shù)形控件，但是官方文檔中，關(guān)于控件的默認(rèn)展開(kāi)只有默認(rèn)展開(kāi)全部或者默認(rèn)全部關(guān)閉，如下所示：
對(duì)于指定節(jié)點(diǎn)的展開(kāi)，需要指定其id，從而通過(guò) default-expanded-keys 設(shè)置默認(rèn)展開(kāi)的節(jié)點(diǎn)。
對(duì)于后臺(tái)返回的數(shù)據(jù)，默認(rèn)展開(kāi)其第一層的第一個(gè)，其實(shí)很簡(jiǎn)單：對(duì)于獲取到的后臺(tái)數(shù)據(jù)，將其第一層節(jié)點(diǎn)添加到數(shù)組中，將 default-expanded-keys 綁定數(shù)組，從而設(shè)置默認(rèn)展開(kāi)的節(jié)點(diǎn)。
實(shí)際應(yīng)用：默認(rèn)展開(kāi)第一層節(jié)點(diǎn)中的第一個(gè)節(jié)點(diǎn)：
<template>
<section>
<!-- 機(jī)構(gòu)類(lèi)型編碼表 -->
<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:[], //后臺(tái)返回的tree樹(shù)列表
treeExpandData:[], //自己定義的用于接收tree樹(shù)id的數(shù)組
provincialCenterId:'',
defaultProps: {
children: 'item',
label: 'name',
},
}
},
created(){
this.getEquipmentList()
},
methods: {
// 獲取樹(shù)形結(jié)構(gòu)默認(rèn)展開(kāi)節(jié)點(diǎn)
getRoleTreeRootNode(provincialCenterId) {
this.treeExpandData.push(provincialCenterId)
},
//獲取tree樹(shù)列表
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)展開(kāi)第一個(gè)節(jié)點(diǎn)
this.getRoleTreeRootNode(this.provincialCenterId)
this.listLoading = false
}else{
this.$message.error(res)
}
})
},
}
</script>
效果圖：
總結(jié)
到此這篇關(guān)于vue el-tree 默認(rèn)展開(kāi)第一個(gè)節(jié)點(diǎn)的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue el-tree默認(rèn)展開(kāi)節(jié)點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2023-03-03
這篇文章主要介紹了微信jssdk邏輯在vue中的運(yùn)用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue如何自動(dòng)化打包測(cè)試環(huán)境和正式環(huán)境的dist/test文件
這篇文章主要介紹了vue如何自動(dòng)化打包測(cè)試環(huán)境和正式環(huán)境的dist/test文件,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
uniapp開(kāi)發(fā)小程序的過(guò)程中主、分包有大小限制,隨著業(yè)務(wù)的增加,使用web-view加載H5的方式,往往純加載并不能滿(mǎn)足業(yè)務(wù)需求,這個(gè)時(shí)候就得了解小程序與H5的交互,這篇文章主要給大家介紹了關(guān)于微信小程序與webviewH5通信的踩坑記錄,需要的朋友可以參考下2024-07-07
Vue Element前端應(yīng)用開(kāi)發(fā)之echarts圖表
在我們做應(yīng)用系統(tǒng)的時(shí)候，往往都會(huì)涉及圖表的展示，綜合的圖表展示能夠給客戶(hù)帶來(lái)視覺(jué)的享受和數(shù)據(jù)直觀體驗(yàn)，同時(shí)也是增強(qiáng)客戶(hù)認(rèn)同感的舉措之一2021-05-05
uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn)
UniApp是一種基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架,可以快速地開(kāi)發(fā)同時(shí)運(yùn)行在多個(gè)平臺(tái)的應(yīng)用程序,這篇文章主要介紹了uniapp項(xiàng)目國(guó)際化標(biāo)準(zhǔn)的配置與實(shí)現(xiàn),需要的朋友可以參考下2023-11-11
vue 每次渲染完頁(yè)面后div的滾動(dòng)條保持在最底部的方法
下面小編就為大家分享一篇vue 每次渲染完頁(yè)面后div的滾動(dòng)條保持在最底部的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
webpack dev-server代理websocket問(wèn)題
這篇文章主要介紹了webpack dev-server代理websocket問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue element input如何讓瀏覽器不保存密碼問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03