Vue+elementUI实现 封装el-menu导航栏

效果图

子组件menus.vue

<template>
	    <div>
	      <template v-for="list in this.menuList" >  
	        <el-submenu :index="list.resourceId" v-if="list.children.length>0" :key="list.resourceId"   > 
	          <template slot="title"  >
	            <i v-if="list.icon" class="el-icon-menu"></i>
	            <span slot="title">{{ list.resourceName}}</span>
	          </template>
	          <!-- 当有子集数据使用自调用，:menuList通过props传递 -->
	          <Menu :menuList="list.children"></Menu> 
	        </el-submenu>
	        <el-menu-item v-else :index="list.resourceId"  :key="list.resourceId">
	          <i v-if="list.icon" class="el-icon-menu"></i>
	          <span>{{list.resourceName}}</span>
	        </el-menu-item>
	      </template>
	    </div> 
    </template>
    <script>
	    export default{
	        name:'Menu',//递归组件的关键，并且要与引入组件的变量名称一致
	        data(){
	            return {
	            }
	        },
	        props:['menuList']
	   }
</script>
<style>  
 .el-menu--collapse  span,   .el-menu--collapse  i.el-submenu__icon-arrow   {
	    height: 0;
	    width: 0;
	    overflow: hidden;
	    visibility: hidden;
	    display: inline-block; 
 } 
</style>

父组件demo.vue

<template>
  <div class="menu_class">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="rgb(73, 80, 96)"
      text-color="rgba(255,255,255,0.7)"
      unique-opened
    >
      <Menu :menuList="this.menuList"></Menu>
    </el-menu>
  </div>
</template>

<script>
import Menu from "./menus.vue";
import menudata from "./menuList.json";
export default {
  components: {
    Menu, 
  },
  data() {
    return {
      menuList: menudata,
    };
  },
  created() {
    console.log(menudata);
  },
  methods: {
  },
};
</script>

<style  scoped>
.menu_class {
  width: 600px;
}
</style>

模拟数据menuList.json

[
    {
        "resourceId": "1",
        "icon":true,
        "resourceName": "一级菜单1",
        "children": [
            {
                "resourceId": "12",
                "resourceName": "二级菜单1",
                "children": [
                    {
                        "resourceId": "122",
                        "resourceName": "三级菜单",
                        "children": [
                            {
                                "resourceId": "1222",
                                "resourceName": "四级级菜单1",
                                "children": [
                                    {
                                        "resourceId": "12221",
                                        "resourceName": "五级级菜单1",
                                        "children": []
                                    },
                                    {
                                        "resourceId": "12222",
                                        "resourceName": "五级级菜单2",
                                        "children": []
                                    },
                                    {
                                        "resourceId": "12223",
                                        "resourceName": "五级级菜单3",
                                        "children": []
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                "resourceId": "13",
                "resourceName": "二级菜单2",
                "children": []
            }
        ]
    }, {
        "resourceId": "2",
        "icon":true,
        "resourceName": "一级菜单2",
        "children": [
            {
                "resourceId": "12",
                "resourceName": "二级菜单1",
                "children":[]
            }
        ]
    }, {
        "resourceId": "3",
        "icon":true,
        "resourceName": "一级菜单3",
        "children": []
    }
]