element的el-menu的收起功能,在菜单收起后,如果让隐藏的子菜单一直显示,方便更改样式
时间: 2024-03-05 22:47:43 浏览: 226
在element的el-menu组件中,可以通过设置`collapse-transition`属性,来自定义菜单的收起/展开过渡效果,同时可以通过设置`collapse`属性来控制菜单的收起/展开状态。
如果你想要让菜单收起后,隐藏的子菜单一直显示,可以通过以下步骤来实现:
1. 在el-menu中添加一个`v-if`条件判断,判断菜单是否处于展开状态。
2. 在菜单的子菜单(el-submenu)中添加一个`v-show`指令,用来控制子菜单的显示/隐藏状态。
示例代码如下:
```
<el-menu :collapse-transition="false" :collapse="isCollapse">
<el-submenu v-for="(item, index) in menuList" :key="index" :index="item.index" v-show="!isCollapse">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</template>
<el-menu-item v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.index">
{{ subItem.title }}
</el-menu-item>
</el-submenu>
</el-menu>
```
在上面的代码中,`isCollapse`是一个Boolean类型的变量,用来控制菜单的收起/展开状态。当菜单处于展开状态时,子菜单会正常显示;当菜单收起时,子菜单会被隐藏,但是通过`v-show`指令,我们可以让子菜单一直显示,方便更改样式。
需要注意的是,当菜单处于收起状态时,子菜单的样式可能会发生变化,需要根据实际情况进行调整。
阅读全文