el-menu动态设置目录展开 default-openeds

需求：页面加载后，默认展开一级菜单目录

<el-menu class="catalog-menu" :default-openeds="openIds" >
    <el-sub-menu v-for="catalogItem in menuList" :key="catalogItem.id" :index="catalogItem.id" class="section-menu">
       <template #title>
          <div class="chapter-item">
              <span>{{ catalogItem.title }}</span>
              <img src="@/assets/images/overview/time.png" class="status-icon" />
          </div>
       </template>
       <CatalogSubMenu :menu-list="catalogItem.children" />
    </el-sub-menu>
 </el-menu>

<script setup lang="ts" >
const menuList = ref<BaseInfoRes.MenuRespVo[]>([]);
const openIds = ref<string[]>([]);

const getDirectory = async () => {
  const { data } = await getDirectoryApi({ teachingClassId: props.classId });
  // 设置 default-openeds 值为第一级目录
  openIds.value.push(data[0].id);
  // 菜单赋值
  menuList.value = data;
};
getDirectory();

菜单数据是后端返回的，这时我们按照官方文档去给 default-openeds 赋值，发现菜单目录并没有展开

解决办法

页面初始化时需要用 v-if 先将 el-menu 隐藏，给 default-openeds 赋值后，再把菜单显示出来。

<el-menu class="catalog-menu" :default-openeds="openIds" v-if="showMenu">
    <el-sub-menu v-for="catalogItem in menuList" :key="catalogItem.id" :index="catalogItem.id" class="section-menu">
       <template #title>
          <div class="chapter-item">
              <span>{{ catalogItem.title }}</span>
              <img src="@/assets/images/overview/time.png" class="status-icon" />
          </div>
       </template>
       <CatalogSubMenu :menu-list="catalogItem.children" />
    </el-sub-menu>
 </el-menu>

<script setup lang="ts" >
const menuList = ref<BaseInfoRes.MenuRespVo[]>([]);
const openIds = ref<string[]>([]);
// 菜单默认要隐藏
const showMenu = ref<boolean>(false);

const getDirectory = async () => {
  const { data } = await getDirectoryApi({ teachingClassId: props.classId });
  // 设置 default-openeds 值为第一级目录
  openIds.value.push(data[0].id);
  // 菜单赋值
  menuList.value = data;
  // 显示菜单
  showMenu.value = true;
};
getDirectory();