<!--
|
* @Author: 黄攀
|
* @Date: 2022-07-07 15:15:36
|
* @Description:
|
-->
|
<template>
|
<div class="navMenu">
|
<template v-for="navMenu in getNewList(navMenus)">
|
<!-- 此菜单下还有子菜单 -->
|
<el-submenu v-if="navMenu.children && navMenu.children.length" :key="navMenu.id"
|
:index="navMenu.id" class="hasChildrenMenu"
|
:class="{activeStyle:navMenu.activeStyle}">
|
<template slot="title">
|
<i :class="`iconfont ${navMenu.icon}`"></i>
|
<span style="margin-left:8px">{{navMenu.name}}</span>
|
</template>
|
<!-- 递归 -->
|
<navMenu :navMenus="getNewList(navMenu.children)"></navMenu>
|
</el-submenu>
|
<!-- 最后一级菜单 -->
|
<el-menu-item class="noChildrenMenu" v-else :key="navMenu.name" :index="`${navMenu.url}`">
|
<template slot="title">
|
<i :class="`iconfont ${navMenu.icon}`"></i>
|
<span style="margin-left:8px">{{navMenu.name}}</span>
|
</template>
|
</el-menu-item>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
import navMenu from '@/components/navMenu/index.vue'
|
//多级菜单组件
|
export default {
|
name: "navMenu",
|
props: ['navMenus'],
|
components: {
|
navMenu
|
},
|
data() {
|
return {}
|
},
|
computed: {
|
getNewList() {
|
return (data) => {
|
return data.filter((v) => {
|
return v.type === 'MENU_TYPE' && v.openType === 'NEW_PAGE'
|
})
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
</style>
|
