效果图
实现方式是:通过给定的数据结构层数来动态生成多级菜单
menu.vue
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#f8f8f9"
style="margin-top: 20px;margin-left: 1px;"
>
<Childrenmenu v-for="menuItem in menuItems" :key="menuItem.value" :item="menuItem" />
</el-menu>
</template>
<script setup>
import Childrenmenu from "./childrenmenu";
const menuItems = [
{
value: '1',
label: '菜单1',
children: [
{
value: '1-1',
label: '子菜单1-1',
children: [
{ value: '1-1-1', label: '子菜单1-1-1' },
{ value: '1-1-2', label: '子菜单1-1-2' },
],
},
{ value: '1-2', label: '子菜单1-2' },
],
},
{
value: '2',
label: '菜单2',
children: [
{ value: '2-1', label: '子菜单2-1' },
{
value: '2-2',
label: '子菜单2-2',
children: [
{ value: '2-2-1', label: '子菜单2-2-1' },
{ value: '2-2-2', label: '子菜单2-2-2' },
],
},
],
},
{
value: '3',
label: '菜单3',
children: [
{
value: '3-1',
label: '子菜单3-1',
children: [
{
value: '3-1-1',
label: '子菜单3-1-1',
children: [
{ value: '3-1-1-1', label: '子菜单3-1-1-1' },
{ value: '3-1-1-2', label: '子菜单3-1-1-2' },
],
},
],
},
],
},
];
const handleSelect = async (key, keyPath) => {
console.log(key, keyPath)
}
</script>
childrenmenu.vue
<template>
<template v-if="item.children">
<el-sub-menu :index="item.value">
<template #title>{{ item.label }}</template>
<Childrenmenu v-for="childItem in item.children" :key="childItem.value" :item="childItem" />
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.value">{{ item.label }}</el-menu-item>
</template>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps(['item']);
</script>
<style scoped>
</style>