Element Menu 左侧菜单栏相关配置
在基于RuoYi-Vue项目进行开发过程中开启 TopNav后,又对左侧菜单栏某些二级菜单开启了。发现当收缩所有菜单随便点击某一级菜单后其他的二级菜单也都会展开,或者收缩后点击某二级菜单下的菜单其他二级菜单也都会展开。
·
前言
在基于RuoYi-Vue项目进行开发过程中开启 TopNav后,又对左侧菜单栏某些二级菜单开启了默认展开。发现当收缩所有菜单随便点击某一级菜单后其他的二级菜单也都会展开,或者收缩后点击某二级菜单下的菜单其他二级菜单也都会展开。
问题解决
实现方案
把 :default-openeds=“[‘1’]” 数值写死改成变量就行了 , default-openeds 与 vue 中 data 的某个变量绑定。改成:default-openeds=“open_list” 。
同时我又把 :unique-opened=“true” 由true改为false,这样也能保证点击二级菜单时其他本来展开的二级菜单不会收缩。
具体实现
前端(修改前)
<!-- layout\components\Sidebar\index.vue -->
<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'],
};
},
参考
更多推荐
已为社区贡献2条内容
所有评论(0)