element?el-tree折疊收縮的實(shí)現(xiàn)示例
原理:通過el-tree 的 elTree.store.nodesMap獲取所有樹節(jié)點(diǎn),設(shè)置所有節(jié)點(diǎn)的 expanded 屬性,使用該方法時特別注意el-tree必須設(shè)置node-key="id",作為每個樹節(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: '一級 1',
id: 98543,
children: [{
label: '二級 1-1',
id: 98343,
children: [{
label: '三級 1-1-1',
id: 98043,
}]
}]
},
{
label: '一級 2',
id: 98545,
children: [{
label: '二級 2-1',
id: 45545,
children: [{
label: '三級 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),該方法返回一個數(shù)組
到此這篇關(guān)于element el-tree折疊收縮的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element el-tree折疊收縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue cli構(gòu)建的項(xiàng)目中請求代理與項(xiàng)目打包問題
這篇文章主要介紹了vue cli構(gòu)建的項(xiàng)目中請求代理與項(xiàng)目打包問題,需要的朋友可以參考下2018-02-02
vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼
這篇文章主要介紹了vue+axios新手實(shí)踐實(shí)現(xiàn)登陸的示例代碼,實(shí)現(xiàn)了登陸攔截,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧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ù)覽功能增加一個下載按鈕(操作方法)
這篇文章主要介紹了vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個下載按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下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
如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
這篇文章主要介紹了如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05
vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03

