資訊專欄INFORMATION COLUMN
摘要：先看這個值即為判斷顯示展開還是收縮狀態的開關。這樣就實現了展開狀態下的菜單。如果有時間的話，我會把這個系列寫完，知道朋友們能獨立開發一個完整的的單頁面后臺管理程序。
涉及到路由，權限等等相關內容的部分，跟本文主旨關系不大，所以我將會在另外一篇文章中詳述，混在一起的話內容太多了
基于element-ui的左側可伸縮的菜單
通過vuejs來開發支持展開收縮的菜單是非常簡單的，只需要v-if v-else即可簡單實現，下面我分步驟詳細講解過程，并在后續的系列文章中詳細講解權限菜單、路由過濾等等一些實用的技巧。當然還包括完整實現后臺管理頁面所要重點關注的細節。
如何把權限菜單展示出來呢？
首先，這是一個動態菜單，該顯示什么樣的菜單需要從后端獲取，規則方面如下：
[
{
"label": "這個菜單",
"id": 001，
"parntid": 0
},
{
"label": "那個菜單",
"id": 002,
"parntid": 0
},
{
"label": "二個菜單",
"id": 003,
"parntid": 001
},
{
"label": "三個菜單",
"id": 003,
"parntid": 001
},
{
"label": "四個菜單",
"id": 003,
"parntid": 002
},
{
"label": "吳個菜單",
"id": 003,
"parntid": 002
}
]
注意：我這里是用的兩級菜單，同樣的原理可以很簡單的生成多級的。json中通過id來實現父子關聯，也可以改成多級的json，用child來表示子級，子級的子級。這樣也可以很容易的生成多級的多級菜單。不過通常也就兩級或者三級。原理相同很容易擴展，如果不知道怎么擴展歡迎加入qq群：478694438來探討。
下面看一下菜單的展示，需要aside標簽，aside標簽是html5的標簽，沒見過aside ？不要緊換成div也行。先看效果，再看代碼（代碼看上去有點長，別被嚇著，我后面詳細講解）：
這是收縮的狀態：
這是展開的狀態：
來分析一下這些亂糟糟的代碼（這是我從源碼中截出來的所以看起來有點亂）：、changeState這三個都是aside標簽下的同級的標簽，分別對應：展開狀態下的菜單、收縮狀態下的菜單、切換狀態的箭頭。
先看el-menu：
{{item.permissionName}} {{child.permissionName}}
collapsed這個值即為判斷顯示展開還是收縮狀態的開關。對照ul下的v-else看。通過一個v-for 循環除所有的父級菜單，再次循環尋找子級菜單中parentId==id的子菜單，作為該父級菜單下的子菜單。這樣就實現了展開狀態下的菜單。
注意：圖標的問題，圖標可以選擇從后端返回class，這樣做起來起來更簡單，我這里是通過預設一個getIcon（）函數在本地設置顯示，由于圖標和路由面臨的是相同的實現，所以我會在路由跳轉相關的地方詳細解釋一下，應該在何種場景下選擇何種方式。
再看ul：
這根element-ui就沒有關系了，簡單的ul li 實現。（路由相關的可以展示忽略，我會在下一篇文章中詳細描述）
最后看：
通過collapsed 在v-if v-else中綁定視圖簡單實現了，開關功能。
寫在最后
這個功能看似簡單卻包含了vuejs的十幾個知識點。難倒了很多人，我之所有寫這篇文章，也是因為很多朋友，在此之前不斷的詢問我如何才能優雅的實現這個功能。當然了這只一個完整的后臺管理的開始，我將會在后面的文章中繼續講解關于大家最關心的要不要使用addRoutes，如何使用addRoutes，不使用addRoutes的情況下如何使用路由攔截來有沒的實現路由與權限的匹配，包括系統內部不同權限展示不同的操作界面的問題，當然了這是后話。如果有時間的話，我會把這個系列寫完，知道朋友們能獨立開發一個完整的vuejs的單頁面后臺管理程序。
另
文中設計的代碼我將會上傳到討論群中（478694438），不足之處優化共同探討。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88484.html
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...
摘要：導語下文實戰之后臺管理系統開發二該文章將從頭到尾梳理我是如何使用開發一個后臺管理項目的，我會將自己遇到的問題貼出，希望可以幫助到其他人。構建項目框架準備對于大陸用戶，建議將的注冊表源設置為國內的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導語 下文：Vue 2.x 實戰之后臺管理系統開發（二） 該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個后臺管理項目的，我會將自己遇到的問...
摘要：要顯示的錯誤提示則可以即可。寫在最后的以上三點已經完全覆蓋了所有表單驗證的情況，可以實現非常復雜的驗證。正式基于這些原因，我堅信是正確的選擇。 前言 老是遇到一些朋友問一些element-ui組件使用相關的基礎問題，因為官方文檔上并沒有提供所有瑣碎的功能代碼demo。從這里開始我會根據我實際遇到的問題記錄一些常見的官方文檔沒有詳述的功能代碼，供給大家拓展思路。 1. 以中國大陸手機號驗...
閱讀 3236·2021-11-24 10:43
閱讀 4196·2021-11-24 10:33
閱讀 3770·2021-11-22 09:34
閱讀 2124·2021-10-11 10:58
閱讀 3731·2021-10-11 10:58
閱讀 859·2021-09-27 13:36
閱讀 3578·2019-08-30 15:54
閱讀 2965·2019-08-29 18:41
