vue+element UI以組件遞歸方式實現多級導航菜單

時間 2019-12-01

標籤 vue+element vue element 組件遞歸方式實現多級導航菜單欄目應用數學简体版

原文原文鏈接

介紹

這是一個是基於element-UI的導航菜單組件基礎上，進行了二次封裝的菜單組件，該組件以組件遞歸的方式，實現了可根據從後端接收到的json菜單數據，動態渲染多級菜單的功能。html

使用方法

因爲該組件是基於element-UI進行二次封裝的，因此在使用該組件時請務必安裝element-UI（安裝方式猛戳這裏），安裝好element-UI後，只需將該組件文件夾SideBar導入到現有項目中便可使用。vue

工做流程

組件封裝好以後，由父組件調用該組件，父組件先向後端發送請求獲取菜單數據，而後將菜單數據傳遞給封裝好的菜單組件，菜單組件經過解析數據，完成菜單渲染。git

使用示例

 1 <template>
 2   <div id="app">
 3     <Sidebar :menuList="menuList"/>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import  Sidebar from './SideBar/SideBar.vue'
 9 export default {
10   name: 'app',
11   components: { Sidebar},
12   data() {
13     return {
14       menuList,
15     }
16   }
17 }
18 </script>

選項

屬性	描述	類型	是否必須
menuList	由後端返回的菜單數據	Array	是

菜單數據格式示例

 1 {
 2     "menuList" : [
 3           {
 4             "path": "/func1",     //菜單項所對應的路由路徑
 5             "title": "功能1",     //菜單項名稱
 6             "children":[]        //是否有子菜單，若沒有，則爲[]
 7           },
 8           {
 9             "path": "/func2",
10             "title": "功能2",
11             "children":[]
12           },
13           {
14             "path": "/func3",
15             "title": "功能3",
16             "children": [
17               {
18                 "path": "/func31",
19                 "title": "功能3-1",
20                 "children":[]
21               },
22               {
23                 "path": "/func32",
24                 "title": "功能3-2",
25                 "children":[]
26               },
27               {
28                 "path": "/func33",
29                 "title": "功能3-3",
30                 "children":[]
31               },
32             ]
33           }
34     ]
35 }