Element Plus点击按钮展开所有el-menu-item的问题求助

你的推测是对的，default-openeds仅在组件首次挂载时生效，后续修改绑定的数组不会触发菜单状态更新，这是因为它是单向初始化属性而非双向绑定属性。以下是两种可行的解决方案：

方案一：使用双向绑定v-model:openeds #

直接将default-openeds替换为v-model:openeds，利用Vue的双向绑定特性实时同步菜单展开状态：

<template>
  <el-button @click="expandMenu">Expand</el-button>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    v-model:openeds="menu" <!-- 替换为双向绑定 -->
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group>
        <template #title><span>Group One</span></template>
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title><span>item four</span></template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><icon-menu /></el-icon>
      <template #title>Navigator Two</template>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <el-icon><document /></el-icon>
      <template #title>Navigator Three</template>
    </el-menu-item>
    <el-menu-item index="4">
      <el-icon><setting /></el-icon>
      <template #title>Navigator Four</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const menu = ref([])
const expandMenu = () => {
  if(menu.value.length) {
    menu.value = []
  } else {
    menu.value = ['1'] // 仅需添加含子菜单的项索引，普通菜单项无需加入
  }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

方案二：通过菜单实例调用展开/关闭方法 #

如果需要更精细的控制，可以通过ref获取菜单实例，调用官方提供的open/closeAll方法：

<template>
  <el-button @click="expandMenu">Expand</el-button>
  <el-menu
    ref="menuRef" <!-- 添加ref标记 -->
    default-active="2"
    class="el-menu-vertical-demo"
  >
    <!-- 菜单内容保持不变 -->
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const menuRef = ref(null)
let isExpanded = false

const expandMenu = async () => {
  await nextTick() // 确保组件已挂载，能获取到实例
  if (isExpanded) {
    menuRef.value?.closeAll()
  } else {
    // 展开所有含子菜单的项
    menuRef.value?.open('1')
    // 如有其他子菜单，继续调用open，例如menuRef.value?.open('xxx')
  }
  isExpanded = !isExpanded
}
</script>

原代码不生效的原因 #

default-openeds仅用于初始化菜单的展开状态，组件挂载后，该属性的变化不会被监听，因此修改绑定的数组无法触发菜单状态更新。而v-model:openeds是Element Plus提供的双向绑定属性，会实时同步菜单的展开/关闭状态，修改数组会立即触发视图更新。

内容的提问来源于stack exchange，提问作者chayi