官方示例
<template><el-radio-group v-model="isCollapse" style="margin-bottom: 20px"><el-radio-button :value="false">expand</el-radio-button><el-radio-button :value="true">collapse</el-radio-button></el-radio-group><el-menudefault-active="2"class="el-menu-vertical-demo":collapse="isCollapse"@open="handleOpen"@close="handleClose"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group><template #title><span>Group One</span></template><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title><span>item four</span></template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><template #title>Navigator Two</template></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><template #title>Navigator Three</template></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><template #title>Navigator Four</template></el-menu-item></el-menu>
</template>
我的代码
<el-menurouter:default-active="route.path"class="sidebar-menu":collapse="isCollapse":unique-opened="true"><div v-for="item in menuList" :key="item.name"><el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path"><template #title><el-icon class="menu-icon" v-if="item.meta && item.meta.icon"><component :is="item.meta.icon" /></el-icon><!--默认图标--><el-icon class="menu-icon" v-else><component :is="Operation" /></el-icon><span>{{ item.name }}</span></template>
代码逻辑中遍历menuList动态添加菜单，问题就出在这里，div破坏了原有的菜单结构，会出现奇怪的问题
总结
- 使用
template替换原来的div标签，<template v-for="item in menuList" :key="item.name"> - 必须保持原有的菜单结构完整性，
el-menu直接包含el-sub-menu或者el-menu-item - 网上大多数办法是通过修改css样式才生效，实际上都是破坏了原有的结构后的不必要操作
