效果图

实现方式是：通过给定的数据结构层数来动态生成多级菜单

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>