element?el-tree折疊收縮的實(shí)現(xiàn)示例
原理:通過(guò)el-tree 的 elTree.store.nodesMap獲取所有樹節(jié)點(diǎn),設(shè)置所有節(jié)點(diǎn)的 expanded 屬性,使用該方法時(shí)特別注意el-tree必須設(shè)置node-key="id",作為每個(gè)樹節(jié)點(diǎn)唯一標(biāo)志,否則使用elTree.store.nodesMap 獲取所有節(jié)點(diǎn)返回是空
效果圖

template代碼
<h3>
<span>el-tree折疊收縮 </span>
<el-tooltip class="item" effect="dark" :content="treeBtn.iconTip" placement="top">
<svg-icon :icon-class="treeBtn.iconClass" @click="toggleEltree"></svg-icon>
</el-tooltip>
</h3>
<el-row>
<el-col :span="3">
<el-tree
ref="elTree"
:data="data"
:props="defaultProps"
node-key="id"
:default-expand-all="expandNode">
</el-tree>
</el-col>
</el-row>
script代碼
export default {
data() {
return {
treeBtn: {
iconClass: 'fullscreen',
iconTip: '展開'
},
expandNode: false,
defaultProps: {
children: 'children',
label: 'label'
},
data: [
{
label: '一級(jí) 1',
id: 98543,
children: [{
label: '二級(jí) 1-1',
id: 98343,
children: [{
label: '三級(jí) 1-1-1',
id: 98043,
}]
}]
},
{
label: '一級(jí) 2',
id: 98545,
children: [{
label: '二級(jí) 2-1',
id: 45545,
children: [{
label: '三級(jí) 2-1-1',
id: 44456,
}]
}]
}
]
},
methods: {
toggleEltree() {
this.expandNode = !this.expandNode
if(this.expandNode) {
this.treeBtn.iconClass = 'exit-fullscreen'
this.treeBtn.iconTip = '收縮'
} else {
this.treeBtn.iconClass = 'fullscreen'
this.treeBtn.iconTip = '展開'
}
let allNodes = this.$refs.elTree.store.nodesMap;
for (let x in allNodes) {
allNodes[x].expanded = this.expandNode;
}
}
}
}
此外elTree.store. _getAllNodes() 亦可獲取所有樹節(jié)點(diǎn),該方法返回一個(gè)數(shù)組
到此這篇關(guān)于element el-tree折疊收縮的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element el-tree折疊收縮內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue cli構(gòu)建的項(xiàng)目中請(qǐng)求代理與項(xiàng)目打包問(wèn)題
這篇文章主要介紹了vue cli構(gòu)建的項(xiàng)目中請(qǐng)求代理與項(xiàng)目打包問(wèn)題,需要的朋友可以參考下2018-02-02
vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼
這篇文章主要介紹了vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼,實(shí)現(xiàn)了登陸攔截,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
這篇文章主要介紹了vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-09-09
vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕(操作方法)
這篇文章主要介紹了vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信,結(jié)合實(shí)例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-02-02
Vue簡(jiǎn)明介紹配置對(duì)象的配置選項(xiàng)
我們知道每一個(gè)vue項(xiàng)目應(yīng)用都是通過(guò)vue的構(gòu)造函數(shù)進(jìn)行創(chuàng)建一個(gè)新的vue項(xiàng)目的。創(chuàng)建vue實(shí)例的配置對(duì)象,可以包括一下屬性選項(xiàng),比如:data、methods、watch、template等等,每一個(gè)選項(xiàng)都有不同的功能,大家可以根據(jù)自己的需求選擇不同的配置2022-08-08
如何解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題
這篇文章主要介紹了如何解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03

