el-menu点击时会全部展开收起

### element UI `el-menu` 点击 展开/收起 单个菜单项不影响其他项

为了实现单个菜单项的独立展开或收起功能而不影响其他项，在使用 Element UI 的 `el-menu` 组件时，可以利用其内置属性和事件来控制子菜单的状态。

#### 使用 `unique-opened` 属性
通过设置 `el-menu` 组件的 `unique-opened` 属性为 `true` 可以确保每次只打开一个子菜单。这虽然不是完全意义上的单独操作各个菜单项，但在某些场景下可能已经满足需求[^1]：

<el-menu unique-opened>
  <!-- 菜单项 -->
</el-menu>

#### 自定义逻辑处理
如果希望更灵活地管理每个菜单项的显示状态，则可以通过监听 `select` 或者自定义事件并结合 Vue.js 数据绑定机制来自行维护各菜单项的激活状态。具体做法如下所示：

- 定义数据模型用于跟踪哪些菜单处于活动状态；
- 当点击某个菜单时更新对应的数据字段；
- 利用这些字段决定是否渲染相应的子级组件；

下面是一个简单的例子说明如何做到这一点:

<script setup lang="ts">
import { ref } from 'vue';

const activeIndex = ref<string[]>([]);

function handleSelect(key: string, keyPath: string[]) {
    const index = activeIndex.value.indexOf(key);
    
    if (index === -1) {
        activeIndex.value.push(key);  
    } else {
        activeIndex.value.splice(index, 1);
    }
}
</script>

<template>
  <el-menu @select="handleSelect">
    <el-submenu v-for="(item,index) in menuItems" :key="index" :index="String(item.id)">
      <template #title>{{ item.title }}</template>
      
      <div v-show="activeIndex.includes(String(item.id))">
          <!-- 子菜单内容 -->
      </div>
    </el-submenu>
  </el-menu>
</template>

此方法允许用户自由切换不同级别的菜单而不会相互干扰，并且可以根据实际业务需求进一步扩展逻辑。