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

介紹

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

使用方法

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

工作流程

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

使用示例

<template>
  <div id="app">
    <Sidebar :menuList="menuList"/>
  </div>
</template>

<script>
import  Sidebar from './SideBar/SideBar.vue'
export default {
  name: 'app',
  components: { Sidebar},
  data() {
    return {
      menuList,
    }
  }
}
</script>

<style>

</style>

選項

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

菜單數據格式示例

{
    "menuList" : [
          {
            "path": "/func1",     //菜單項所對應的路由路徑
            "title": "功能1",     //菜單項名稱
            "children":[]        //是否有子菜單，若沒有，則為[]
          },
          {
            "path": "/func2",
            "title": "功能2",
            "children":[]
          },
          {
            "path": "/func3",
            "title": "功能3",
            "children": [
              {
                "path": "/func31",
                "title": "功能3-1",
                "children":[]
              },
              {
                "path": "/func32",
                "title": "功能3-2",
                "children":[]
              },
              {
                "path": "/func33",
                "title": "功能3-3",
                "children":[]
              },
            ]
          }
    ]
}

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

效果圖

組件代碼

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

（完）