Element UI 是一套基于 Vue.js 的組件庫,擁有豐富的組件和組件文檔,能夠幫助我們快速搭建一套美觀、易用的 Web 應用界面。 Element 菜單是 Element UI 中的一個側邊欄菜單,可以通過 JSON 數據來動態生成菜單。
{ "menus": [{ "title": "首頁", "icon": "el-icon-menu", "index": "/" }, { "title": "用戶管理", "icon": "el-icon-user", "submenus": [{ "title": "用戶列表", "index": "/users" }, { "title": "新增用戶", "index": "/users/create" }] }, { "title": "文章管理", "icon": "el-icon-document", "submenus": [{ "title": "文章列表", "index": "/articles" }, { "title": "新增文章", "index": "/articles/create" }] }] }
上面的 JSON 數據定義了一個包含三個菜單的菜單欄,每個菜單都有一個標題、一個圖標和一個對應的路由路徑。其中第二個菜單“用戶管理”下還有兩個子菜單“用戶列表”和“新增用戶”,第三個菜單“文章管理”下也有兩個子菜單“文章列表”和“新增文章”。
通過 Element UI 的菜單組件,我們可以將上面的 JSON 數據生成一個動態的菜單欄,支持菜單的點擊事件、動態修改菜單、切換菜單等功能。
總結來說,Element 菜單的 JSON 數據格式清晰簡潔,同時支持多級菜單嵌套,給我們搭建 Web 應用界面提供了很大的幫助。
上一篇vue單設備登錄
下一篇vue單獨打包iview