elementplus :unique-opened='true' 不起作用？

父组件部分：menuBar.vue:

<div class="menu-bottom">
      <!-- 导航菜单树组件，动态加载菜单 -->
      <el-menu ref="navmenu"  class="menuContainer" background-color="white"
        text-color="#707781" box-shadow = '12px 0px 48px 0px rgba(0, 0, 0, 0.04)'
        active-text-color="#5397FE"
        :default-active="$route.path"
        :unique-opened='true'
        router
        >
        <!-- 导航菜单树组件，动态加载菜单 -->
        <menuTree :menuList="menus" />
      </el-menu>
    </div>

设置了：

1. :unique-opened='true'：只保持一个子菜单的展开
2. :default-active="$route.path"：加载时的激活项为当前路由导航
3. router：是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。

刚开始错误的子组件 menuTree.vue:

1.主要错误的部分：

• v-for="(item) in menuList" :key="item.url"
• <el-sub-menu :index="item.url"

2.导致的问题：:unique-opened='true'失效

3.原因：发现所有的< el-menu-item :index=‘-1’>

<template>
  <div>
    <template v-for="(item) in menuList" :key="item.url">
      <!--      分为两种方式渲染：有子菜单和没有子菜单-->
      <el-sub-menu :index="item.url" v-if="item.list && item.list.length >= 1">
        <template #title>
          <el-icon></el-icon>
          <span>{{ item.name }}</span>
        </template>
        !--        有子菜单的继续遍历（递归）-->
        <menuTree :menuList="item.list"></menuTree>
      </el-sub-menu>
      <!--      没有子菜单-->
      <el-menu-item :index="'/' + item.url" v-else >
        <el-icon></el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script setup>

  defineOptions({ name: 'MenuTree' })

  const props = defineProps({
    menuList: {
      type: Array
    }
  })

</script>

纠正后的子组件 menuTree.vue:

可以正常只保持一个子菜单打开了！！！

主要修改的部分：

• v-for="(item, index) in menuList" :key="index"
• <el-sub-menu :index="''+index"
  注意这里：''+index，是数字转换成字符串，否则控制台会有错误警告提示

<template>
  <div>
    <template v-for="(item, index) in menuList" :key="index">
      <!--      分为两种方式渲染：有子菜单和没有子菜单-->
      <el-sub-menu :index="''+index" v-if="item.list && item.list.length >= 1">
        <template #title>
          <el-icon></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <!--        有子菜单的继续遍历（递归）-->
        <menuTree :menuList="item.list"></menuTree>
      </el-sub-menu>
      <!--      没有子菜单-->
      <el-menu-item :index="'/' + item.url" v-else >
        <el-icon></el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script setup>

  defineOptions({ name: 'MenuTree' })

  const props = defineProps({
    menuList: {
      type: Array
    }
  })

</script>