<template>
|
<template v-for="(item, i) in routes" :key="`${i}`">
|
<el-sub-menu v-if="item.children" :index="`${i}`">
|
<template #title>
|
<el-icon>
|
<component :is="item.icon"></component>
|
</el-icon>
|
<span>{{ item.name }}</span>
|
</template>
|
|
<template v-for="(child, i2) in item.children" :key="`${i}-${i2}`">
|
<el-menu-item-group v-if="child.group" :title="child.name">
|
<el-menu-item
|
v-for="(child2, i3) in child.children"
|
:key="`${i}-${i2}-${i3}`"
|
:index="child2.path"
|
@click="navPage(item, child, child2)"
|
>
|
<el-icon v-if="child2.icon">
|
<component :is="child2.icon"></component>
|
</el-icon>
|
<template #title>{{ child2.name }}</template>
|
</el-menu-item>
|
</el-menu-item-group>
|
<el-menu-item v-else :index="child.path" @click="navPage(item, child)">
|
<el-icon v-if="child.icon">
|
<component :is="child.icon"></component>
|
</el-icon>
|
<template #title>{{ child.name }}</template>
|
</el-menu-item>
|
</template>
|
</el-sub-menu>
|
|
<el-menu-item v-else :index="item.path" @click="navPage(item)">
|
<el-icon>
|
<component :is="item.icon"></component>
|
</el-icon>
|
<template #title>{{ item.name }}</template>
|
</el-menu-item>
|
</template>
|
</template>
|
|
<script>
|
export default {
|
name: 'CoreMenuItem',
|
props: {
|
routes: {
|
type: Array,
|
},
|
},
|
emits: ['navPage'],
|
methods: {
|
navPage(...item) {
|
// const titles = item.map((value) => {
|
// return value.name;
|
// });
|
this.$emit('navPage', ...item);
|
},
|
},
|
};
|
</script>
|
