el-menu 选中让全部el-submenu 收起

在Element UI库中的`el-menu`组件中，如果你想要实现当一个菜单项（`el-menu-item`）被选中时，其对应的下级所有`el-submenu`都收起（折叠），你可以通过监听`select`事件并在其中操作状态来实现。这里是一个基本的示例：

<template>
  <el-menu default-active="1" @select="handleMenuSelect">
    <el-menu-item index="1">
      菜单一
      <el-submenu :index="1.1">
        <template slot="title">子菜单一</template>
        <el-menu-item index="1.1.1">选项1</el-menu-item>
        <el-menu-item index="1.1.2">选项2</el-menu-item>
      </el-submenu>
    </el-menu-item>
    <!-- 添加更多的菜单和子菜单 -->
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleMenuSelect(index) {
      // 判断当前选中的是否为某个一级菜单项
      if (Number.isInteger(index)) {
        // 获取一级菜单的所有子菜单
        const subMenus = document.querySelectorAll('.el-submenu');
        
        // 遍历子菜单，设置每个子菜单的active状态为false
        subMenus.forEach(submenu => submenu.active = false);
        
        // 如果选中的是一级菜单，则对应的一级子菜单设为active
        const selectedSubmenu = document.querySelector(`#submenu-${index}`);
        if (selectedSubmenu) {
          selectedSubmenu.active = true;
        }
      }
    },
  },
};
</script>

在这个例子中，我们假设每个`el-submenu`都有一个唯一的ID，比如`submenu-1.1`、`submenu-1.2`等。`handleMenuSelect`方法会根据`index`找到并设置相应子菜单的`active`属性。