el-menu点击一级后菜单二级菜单隐藏

在Vue.js的Element UI库中，`el-menu`组件是用来创建导航菜单的，它通常用于分层展示菜单结构。如果你想实现在点击一级菜单后隐藏其下级二级菜单，你可以通过绑定`lazy`属性和`open-keys`属性来达到这个效果。

`lazy`属性设置为`true`会让菜单默认展开状态为关闭，即不会立即加载所有子菜单，而是在用户交互时动态加载。然后，当你点击一级菜单项（假设它的值保存在`menu-item-key`里），可以在点击事件处理器中更新`open-keys`数组，添加或移除当前选中的一级菜单项的键，以此控制二级菜单的显示隐藏。例如：

<template>
  <el-menu :default-active="activeIndex" :open-keys="openKeys" @select="handleSelect">
    <!-- ... menu items with `index` and `title` properties -->
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '', // 当前激活的菜单项
      openKeys: [],     // 显示的二级菜单的keys
    };
  },
  methods: {
    handleSelect(index) {
      this.openKeys = []; // 清空已打开的二级菜单
      if (index !== '-') { // 如果不是自定义的分割符 '-'
        this.openKeys.push(index); // 添加点击的一级菜单项的key
      }
    }
  }
};
</script>

在这个例子中，当点击非分割符的一级菜单，会将对应的key添加到`openKeys`中，使得其下的二级菜单显示；如果点击的是分割符（比如`-`，通常表示顶部导航），则清空`openKeys`，隐藏所有的二级菜单。