摘要：先看這個(gè)值即為判斷顯示展開(kāi)還是收縮狀態(tài)的開(kāi)關(guān)。這樣就實(shí)現(xiàn)了展開(kāi)狀態(tài)下的菜單。如果有時(shí)間的話，我會(huì)把這個(gè)系列寫(xiě)完，知道朋友們能獨(dú)立開(kāi)發(fā)一個(gè)完整的的單頁(yè)面后臺(tái)管理程序。

涉及到路由，權(quán)限等等相關(guān)內(nèi)容的部分，跟本文主旨關(guān)系不大，所以我將會(huì)在另外一篇文章中詳述，混在一起的話內(nèi)容太多了

基于element-ui的左側(cè)可伸縮的菜單
通過(guò)vuejs來(lái)開(kāi)發(fā)支持展開(kāi)收縮的菜單是非常簡(jiǎn)單的，只需要v-if v-else即可簡(jiǎn)單實(shí)現(xiàn)，下面我分步驟詳細(xì)講解過(guò)程，并在后續(xù)的系列文章中詳細(xì)講解權(quán)限菜單、路由過(guò)濾等等一些實(shí)用的技巧。當(dāng)然還包括完整實(shí)現(xiàn)后臺(tái)管理頁(yè)面所要重點(diǎn)關(guān)注的細(xì)節(jié)。

如何把權(quán)限菜單展示出來(lái)呢？
首先，這是一個(gè)動(dòng)態(tài)菜單，該顯示什么樣的菜單需要從后端獲取，規(guī)則方面如下：

[
    {
        "label": "這個(gè)菜單",
        "id": 001，
        "parntid": 0
    },
    {
        "label": "那個(gè)菜單",
        "id": 002,
        "parntid": 0
    },
    {
        "label": "二個(gè)菜單",
        "id": 003,
        "parntid": 001
    },
    {
        "label": "三個(gè)菜單",
        "id": 003,
        "parntid": 001
    },
    {
        "label": "四個(gè)菜單",
        "id": 003,
        "parntid": 002
    },
    {
        "label": "吳個(gè)菜單",
        "id": 003,
        "parntid": 002
    }
]

注意：我這里是用的兩級(jí)菜單，同樣的原理可以很簡(jiǎn)單的生成多級(jí)的。json中通過(guò)id來(lái)實(shí)現(xiàn)父子關(guān)聯(lián)，也可以改成多級(jí)的json，用child來(lái)表示子級(jí)，子級(jí)的子級(jí)。這樣也可以很容易的生成多級(jí)的多級(jí)菜單。不過(guò)通常也就兩級(jí)或者三級(jí)。原理相同很容易擴(kuò)展，如果不知道怎么擴(kuò)展歡迎加入qq群：478694438來(lái)探討。
下面看一下菜單的展示，需要aside標(biāo)簽，aside標(biāo)簽是html5的標(biāo)簽，沒(méi)見(jiàn)過(guò)aside ？不要緊換成div也行。先看效果，再看代碼（代碼看上去有點(diǎn)長(zhǎng)，別被嚇著，我后面詳細(xì)講解）：
這是收縮的狀態(tài)：

這是展開(kāi)的狀態(tài)：

來(lái)分析一下這些亂糟糟的代碼（這是我從源碼中截出來(lái)的所以看起來(lái)有點(diǎn)亂）：
、

、changeState這三個(gè)都是aside標(biāo)簽下的同級(jí)的標(biāo)簽，分別對(duì)應(yīng)：展開(kāi)狀態(tài)下的菜單、收縮狀態(tài)下的菜單、切換狀態(tài)的箭頭。
先看el-menu：

collapsed這個(gè)值即為判斷顯示展開(kāi)還是收縮狀態(tài)的開(kāi)關(guān)。對(duì)照ul下的v-else看。通過(guò)一個(gè)v-for 循環(huán)除所有的父級(jí)菜單，再次循環(huán)尋找子級(jí)菜單中parentId==id的子菜單，作為該父級(jí)菜單下的子菜單。這樣就實(shí)現(xiàn)了展開(kāi)狀態(tài)下的菜單。
注意：圖標(biāo)的問(wèn)題，圖標(biāo)可以選擇從后端返回class，這樣做起來(lái)起來(lái)更簡(jiǎn)單，我這里是通過(guò)預(yù)設(shè)一個(gè)getIcon（）函數(shù)在本地設(shè)置顯示，由于圖標(biāo)和路由面臨的是相同的實(shí)現(xiàn)，所以我會(huì)在路由跳轉(zhuǎn)相關(guān)的地方詳細(xì)解釋一下，應(yīng)該在何種場(chǎng)景下選擇何種方式。

再看ul：

這根element-ui就沒(méi)有關(guān)系了，簡(jiǎn)單的ul li 實(shí)現(xiàn)。（路由相關(guān)的可以展示忽略，我會(huì)在下一篇文章中詳細(xì)描述）

最后看：

通過(guò)collapsed 在v-if v-else中綁定視圖簡(jiǎn)單實(shí)現(xiàn)了，開(kāi)關(guān)功能。

寫(xiě)在最后
這個(gè)功能看似簡(jiǎn)單卻包含了vuejs的十幾個(gè)知識(shí)點(diǎn)。難倒了很多人，我之所有寫(xiě)這篇文章，也是因?yàn)楹芏嗯笥?，在此之前不斷的詢?wèn)我如何才能優(yōu)雅的實(shí)現(xiàn)這個(gè)功能。當(dāng)然了這只一個(gè)完整的后臺(tái)管理的開(kāi)始，我將會(huì)在后面的文章中繼續(xù)講解關(guān)于大家最關(guān)心的要不要使用addRoutes，如何使用addRoutes，不使用addRoutes的情況下如何使用路由攔截來(lái)有沒(méi)的實(shí)現(xiàn)路由與權(quán)限的匹配，包括系統(tǒng)內(nèi)部不同權(quán)限展示不同的操作界面的問(wèn)題，當(dāng)然了這是后話。如果有時(shí)間的話，我會(huì)把這個(gè)系列寫(xiě)完，知道朋友們能獨(dú)立開(kāi)發(fā)一個(gè)完整的vuejs的單頁(yè)面后臺(tái)管理程序。

另
文中設(shè)計(jì)的代碼我將會(huì)上傳到討論群中（478694438），不足之處優(yōu)化共同探討。