element?el-tree折疊收縮的實(shí)現(xiàn)示例
原理:通過(guò)el-tree 的 elTree.store.nodesMap獲取所有樹(shù)節(jié)點(diǎn),設(shè)置所有節(jié)點(diǎn)的 expanded 屬性,使用該方法時(shí)特別注意el-tree必須設(shè)置node-key="id",作為每個(gè)樹(shù)節(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: '展開(kāi)'
},
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 = '展開(kāi)'
}
let allNodes = this.$refs.elTree.store.nodesMap;
for (let x in allNodes) {
allNodes[x].expanded = this.expandNode;
}
}
}
}
此外elTree.store. _getAllNodes() 亦可獲取所有樹(shù)節(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新手入門出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
淺談el-table中使用虛擬列表對(duì)對(duì)表格進(jìn)行優(yōu)化
我們會(huì)經(jīng)常使用表格,如果數(shù)據(jù)量大就直接可以分頁(yè),如果多條可能會(huì)影響表格的卡頓,那么應(yīng)該如何進(jìn)行優(yōu)化,感興趣的可以了解一下2021-08-08
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法
在本篇文章里小編給大家整理的是關(guān)于vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法,需要的朋友們參考下。2020-03-03
vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹(shù)
這篇文章主要為大家詳細(xì)介紹了vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
解決elementui中NavMenu導(dǎo)航菜單高亮問(wèn)題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導(dǎo)航菜單高亮問(wèn)題(解決多種情況),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05
Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06

