用v-for遍历菜单,有子菜单继续调用当前组件遍历菜单
<template>
<template v-for="menu in userMenu">
<el-submenu
v-if="menu.children && menu.children.length && menu.children[0].menuType == 1"
popper-class="test"
:key="menu._id"
:index="menu.path"
>
<template #title>
<i :class="menu.icon"></i>
<span>{{ menu.menuName }}</span>
</template>
<!-- 这里有子菜单的情况下继续调用tree-menu组件 -->
<tree-menu :userMenu="menu.children" />
</el-submenu>
<el-menu-item
v-else-if="menu.menuType == 1"
:index="menu.path"
:key="menu._id"
>{{ menu.menuName }}</el-menu-item
>
</template>
</template>
<script>
export default {
name: 'TreeMenu',
props: {
userMenu: {
type: Array,
default () {
return []
}
}
}
}
</script>