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-08windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法
在本篇文章里小編給大家整理的是關(guān)于vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法,需要的朋友們參考下。2020-03-03vue使用拖拽方式創(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-05Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06