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