实现多层menu菜单,获取数据动态渲染
//子组件
<!-- 一级菜单 -->
<el-menu-item :index="menuObj.url" v-if="!menuObj.child">
<i :class="menuObj.icon"></i>
<span slot="title">{{ menuObj.name }}</span>
</el-menu-item>
<!-- 二级菜单 -->
<el-submenu :index="menuObj.url" v-else>
<template slot="title">
<i :class="menuObj.icon"></i>
<span>{{ menuObj.name }}</span>
</template>
<!-- 多级菜单 -->
<menuList v-for="(child, i) in menuObj.child" :menuObj="child" :key="i" />
</el-submenu>
//父组件
<!-- 多级路由跳转的实现 -->
<menuList v-for="(v,i) in menuList" :key="i" :menuObj='v'></menuList>
主要是用递归的方法进行渲染