思路:创建子菜单递归组件,这里我命名为MySubMenu.vue
父组件:引用自定义组件MySubMenu,将菜单数组传递给子组件
<template>
<el-menu
:unique-opened="false"
:collapse-transition="false"
:router="true"
:default-active="activePath"
style="overflow-y: auto;height: calc(100% - 60px);"
:collapse="isCollapse"
>
<my-sub-menu :subMenu="menuData"></my-sub-menu>
</el-menu>
</template>
<script>
import mySubMenu from './MySubMenu'
export default {
components: {
mySubMenu
},
}
</script>
子组件:根据菜单数组的结构自行修改pagePojoList,pageUrl,kid,name,及自定义图标
<template>
<div>
<template v-for="menu in subMenu">
<el-submenu
v-if="menu.pagePojoList && menu.pagePojoList.length > 0"
:index="menu.pageUrl"
:key="menu.kid"
>
<template slot="title">
<!-- 自定义图标-->
<i :class="'iconfont icon-'+menu.imageUrl" />
{{ menu.name }}
</template>
<!-- 调用自身-->
<my-sub-menu :subMenu="menu.pagePojoList"></my-sub-menu>
</el-submenu>
<!-- 如果没有子菜单,则显示当前内容 -->
<el-menu-item v-else :index="menu.pageUrl" :key="menu.kid">
<i :class="'iconfont icon-'+menu.imageUrl" />
{{ menu.name }}
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
inject: ['reload'],
name: 'MySubMenu',
props: {
subMenu: []
},
watch: {
},
created() {
},
methods: {
}
}
</script>
<style scoped>
</style>