el-submenu 关闭问题

您想要关闭el-submenu吗？如果是的话，您可以使用以下代码：

this.$refs.submenu.isOpened() && this.$refs.submenu.handleCloseMenu();

其中，`this.$refs.submenu` 是您要关闭的el-submenu组件的引用。这段代码会先检查el-submenu是否已经打开，如果是的话则调用`handleCloseMenu()`方法来关闭它。

相关问题

vue的menu中点击el-item但是el-submenu不会收回

这个问题可能是因为你没有正确设置 `unique-opened` 属性。`unique-opened` 属性设置为 `true` 后，只有一个子菜单可以打开，当你点击另一个子菜单时，之前打开的子菜单将自动关闭。你可以尝试在 `el-menu` 标签上添加 `unique-opened` 属性，例如：

<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>导航一</span>
    </template>
    <el-menu-item-group>
      <template slot="title">分组一</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="分组2">
      <el-menu-item index="1-3">选项3</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">选项4</template>
      <el-menu-item index="1-4-1">选项4-1</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三（无法点击）</span>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
  </el-menu-item>
</el-menu>

如果你已经设置了 `unique-opened` 属性，但是还是无法正常工作，你可以尝试在 `el-menu` 标签上添加 `collapse` 事件的处理函数，以手动关闭子菜单。例如：

<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :unique-opened="true" @collapse="handleCollapse">
  ...
</el-menu>

methods: {
  handleCollapse() {
    this.$nextTick(() => {
      this.$refs.menu.updateOpened();
    });
  },
}

在上面的例子中，我们在 `handleCollapse` 方法中调用 `updateOpened` 方法来手动关闭子菜单。注意，我们使用了 `$nextTick` 方法来确保 DOM 已经更新完毕。

elementUi的el-menu 导航菜单 怎么关闭点击开启下拉框

要实现关闭点击开启下拉框的功能，可以使用 `before-dropdown-toggle` 事件来实现。具体操作如下：

1. 在 `el-menu` 组件上添加 `@before-dropdown-toggle="handleToggle"` 监听事件。
2. 在 `methods` 中定义 `handleToggle` 方法来处理点击事件。
3. 在 `handleToggle` 方法中使用 `event.stopPropagation()` 方法来阻止事件冒泡，然后根据当前菜单项的状态来切换下拉框的显示状态。

示例代码如下：

<template>
  <el-menu :default-active="activeIndex" mode="horizontal" @before-dropdown-toggle="handleToggle">
    <el-submenu index="1">
      <template slot="title">导航一</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-submenu index="2">
      <template slot="title">导航二</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1-1',
      isOpen: false
    };
  },
  methods: {
    handleToggle(event, submenu) {
      event.stopPropagation();
      submenu.isOpened ? submenu.handleCollapse() : submenu.handleExpand();
    }
  }
};
</script>

在上述示例中，我们在 `methods` 中定义了 `handleToggle` 方法来处理点击事件。该方法接收 `event` 和 `submenu` 两个参数，其中 `event` 是当前点击事件对象，`submenu` 是当前菜单项的子菜单对象。

在 `handleToggle` 方法中，我们调用了 `event.stopPropagation()` 方法来阻止事件冒泡，然后使用 `submenu.isOpened` 属性来判断当前菜单项的状态。如果菜单项已经打开，则调用 `submenu.handleCollapse()` 方法来关闭下拉框；否则调用 `submenu.handleExpand()` 方法来打开下拉框。这样就可以实现关闭点击开启下拉框的功能了。