vue3使用el-menu多级菜单出现点击一个全部展开的问题

在Vue 3中使用Element Plus（Element UI的继任者）的<el-menu>组件时，如果遇到点击一个子菜单项会导致整个多级菜单展开的问题，很可能是因为<el-menu>组件的collapse属性没有正确设置或者是<el-submenu>组件的popper-class属性导致的样式冲突。

解决方案：

1. 确保<el-menu>的collapse属性根据需要可以正确地反映菜单的折叠状态。如果你的菜单应该始终折叠，请确保collapse属性被设置为true。
2. 检查是否有CSS样式覆盖了Element Plus默认的行为。如果有，请确保你的自定义样式不会影响菜单的展开和折叠。
3. 如果使用了popper-class属性来自定义下拉菜单的样式，确保没有CSS规则影响了菜单的定位或者z-index导致点击时菜单不正确显示。
4. 确保没有其他JavaScript代码错误导致菜单状态不正确。

以下是一个简单的示例代码，展示了如何在Vue 3中使用<el-menu>和<el-submenu>，并假设你希望菜单始终折叠：

<template>
  <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="true">
    <el-submenu index="1">
      <template #title>
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-submenu>
    <!-- 其他菜单项 -->
  </el-menu>
</template>
 
<script setup>
const handleOpen = (index, indexPath) => {
  console.log('open', index, indexPath);
};
const handleClose = (index, indexPath) => {
  console.log('close', index, indexPath);
};
</script>
 
<style>
/* 确保没有CSS覆盖菜单的样式 */
</style>

在这个例子中，:collapse绑定确保了菜单始终折叠。如果需要根据某些条件动态折叠菜单，可以将collapse属性绑定到一个响应式数据属性上。