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