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

介紹

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

使用方法

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

工做流程

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

使用示例

 

 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 }

 關於如何將數據轉化成以上格式，請參考博文樹形多級菜單數據源嵌套結構與扁平結構互轉

 

效果圖

組件代碼

完整代碼請戳☞Vue-Components-Library/SideBar

（完）