快捷導(dǎo)航

Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例

更新時(shí)間：2023年07月23日 16:55:00 作者：小氣鬼SYQ

本文主要介紹了Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

綁定屬性expanded，樹(shù)自帶方法this.$refs.tree.store.root.expanded，在mounted方法中給樹(shù)方法賦值expandAll = false，具體代碼實(shí)現(xiàn)詳情如下：

html代碼：

<template>
      <el-tree
                  ref="tree"
                  :data="showDepData"
                  expand-on-click-node="false"
                  :props="{
                    label: 'name'
                  }"
                  node-key="deptId"
                  highlight-current
                  :default-expand-all="expanded"
                  @node-click="changeDepClick"
                >
                  <span slot-scope="{ node, data }">
                    <i
                      v-if="node.level == 1"
                      style="margin-right: 4px"
                      class="wk wk-customer"
                    />{{ data.name }}
                  </span>
                </el-tree>
</template>

js代碼：

data(){
return{
expanded:false
}
}
mounted(){
//獲取樹(shù)自帶的屬性并給他賦值false
this.$refs.store.root.expanded = expanded
}

到此這篇關(guān)于Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)el-tree樹(shù)展開(kāi)或收起內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中的百度地圖定位BMap.GeolocationControl的用法
BMap.GeolocationControl?是百度地圖API中的一個(gè)類(lèi),用于添加地理定位控件到地圖上,以便用戶可以通過(guò)該控件獲取自己的當(dāng)前位置,本文給大家介紹Vue中的百度地圖定位BMap.GeolocationControl的用法,感興趣的朋友跟隨小編一起看看吧
2023-10-10
vue實(shí)例的選項(xiàng)總結(jié)
這篇文章主要介紹了Vue實(shí)例的選項(xiàng)有哪些，文中講解非常細(xì)致，代碼幫助大家更好的學(xué)習(xí)，感興趣的朋友可以了解下
2020-06-06
Vue生命周期與后端交互實(shí)現(xiàn)流程詳解
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程,也就是new Vue()開(kāi)始就是vue生命周期的開(kāi)始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過(guò)程,稱這是Vue的?命周期
2022-11-11
vant中field組件label屬性兩端對(duì)齊問(wèn)題及解決
這篇文章主要介紹了vant中field組件label屬性兩端對(duì)齊問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
詳解如何優(yōu)雅的進(jìn)行Vue的狀態(tài)管理
隨著項(xiàng)目的發(fā)展和復(fù)雜性的增加,對(duì) Vuex 進(jìn)行更深入的了解和使用就變得非常重要,本篇文章將帶您探索 Vuex 的進(jìn)階使用,包括模塊化、命名空間、getter 的高級(jí)用法等,需要的朋友可以參考下
2023-09-09
vue中組件傳值的常見(jiàn)方式小結(jié)
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個(gè)常見(jiàn)的需求,Vue 提供了多種方法來(lái)實(shí)現(xiàn)這一目標(biāo),包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來(lái)學(xué)習(xí)一下這些方法的具體實(shí)現(xiàn)吧
2023-12-12
安裝vue-cli報(bào)錯(cuò) -4058 的解決方法
這篇文章主要介紹了安裝vue-cli報(bào)錯(cuò) -4058 的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
Vuex之module使用方法及場(chǎng)景說(shuō)明
這篇文章主要介紹了Vuex之module使用方法及場(chǎng)景說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題
下面小編就為大家分享一篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
解決echarts圖表y軸數(shù)據(jù)間隔過(guò)大的問(wèn)題
這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過(guò)大的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03