Element Menu 左侧菜单栏相关配置

前言

在基于RuoYi-Vue项目进行开发过程中开启 TopNav后，又对左侧菜单栏某些二级菜单开启了默认展开。发现当收缩所有菜单随便点击某一级菜单后其他的二级菜单也都会展开，或者收缩后点击某二级菜单下的菜单其他二级菜单也都会展开。

问题解决

实现方案

把 :default-openeds=“[‘1’]” 数值写死改成变量就行了 ， default-openeds 与 vue 中 data 的某个变量绑定。改成:default-openeds=“open_list” 。
同时我又把 :unique-opened=“true” 由true改为false，这样也能保证点击二级菜单时其他本来展开的二级菜单不会收缩。

具体实现

前端（修改前）

      <el-menu
            :default-openeds="['/aqyx/ssjk', '/aqyx/dnzl', '/bbgl/ggbb', '/bbgl/zdybb', '/aqyx/gjgl']"
        :default-active="activeMenu"
        :collapse="isCollapse"
        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        :unique-opened="true"
        :active-text-color="settings.theme"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path  + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>

前端（修改后）

      <el-menu
            :default-openeds="open_list"
        :default-active="activeMenu"
        :collapse="isCollapse"
        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        :unique-opened="false"
        :active-text-color="settings.theme"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path  + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>

  data() {
    return {
      open_list: ['/aqyx/ssjk', '/aqyx/dnzl', '/bbgl/ggbb', '/bbgl/zdybb', '/aqyx/gjgl'],
    };
  },

参考

Element ui NavMenu 默认展示一个菜单的子菜单，点击子菜单会折叠的解决方法

Element NavMenu 默认展示一个菜单的子菜单，点击其它菜单会折叠的解决方法