1.动态菜单(递归模式)
<template>
<div>
<template v-for="menu in menuTreeData">
<!-- 包含子节点 -->
<el-submenu v-if="menu.children" :key="menu.menuUrl" :index="menu.menuUrl">
<template slot="title">
<i :class="menu.iconUrl"></i>
<span slot="title" :class="menu.menuLevel==='1'?'aside':''">{{menu.menuName}}</span>
</template>
<!-- 递归 -->
<menu-tree :menuTreeData="menu.children"></menu-tree>
</el-submenu>
<!-- 不包含子节点 -->
<el-menu-item v-else :key="menu.menuUrl" :index="menu.menuUrl">
<i :class="menu.iconUrl"></i>
<span slot="title" :class="menu.menuLevel==='1'?'aside':''">{{ menu.menuName }}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
/**
* el-menu 递归模式
*/
export default {
props: ['menuTreeData'],
name: 'MenuTree'
}
</script>
//
<style>
.aside {
font-size: 18px;
}
.el-menu-item.is-active {
background-color: #409eff !important;
}
::v-deep.el-menu {
border-right: solid 0px #e6e6e6;
}
/* .el-scrollbar{
height: 100%;
}
.el-scrollbar__wrap {
overflow: scroll;
width: 110%;
height: 120%;
} */
/* 注意<style>标签中不要加scope,否则导致>还是无法隐藏 */
/*由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一,但是却嵌套了<div>,而导致收折就隐藏不了文字*/
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
</style>
2.菜单导航折叠后文字不隐藏
其他人的图
解决方式
这里研究了一下,发现只要我把el-submenu直接放入到el-menu中是可以的,但是实际业务中做动态路由的时候会带着菜单项也为动态的,那么基本上就会吧菜单项抽离为组件然后循环渲染,但是由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一,但是却嵌套了<div>,而导致收折就隐藏不了文字那么解决方案就来了,我们手动写样式将文字和>隐藏!
注意<style>
标签中不要加scope,否则导致>还是无法隐藏
<style>
/*由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一,但是却嵌套了<div>,而导致收折就隐藏不了文字*/
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span{
display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow{
display: none;
}
</style>
————————————————
版权声明:本文为CSDN博主「程序员劝退师-TAO」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/CSDN877425287/article/details/117198178
3. 导航栏折叠
- 项目安装
vue-fragment
cnpm install --save vue-fragment
- 在
main.js
中引入
// main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
- 将
zMenu.vue
中的<div>
修改为<fragment>
即可
<template>
<fragment>
<template v-for="menu in menus">
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.menuId + ''" :key="menu.menuId">
<template slot="title">
<i :class="menu.icon"></i>
<span slot="title">{{menu.menuName}}</span>
</template>
<z-menu :menus="menu.children"></z-menu>
</el-submenu>
<el-menu-item v-else :index="menu.menuId + ''" @click="handleRouter(menu)" :key="menu.menuId">
<i :class="menu.icon"></i>
<span slot="title">{{menu.menuName}}</span>
</el-menu-item>
</template>
</fragment>
</template>
————————————————
版权声明:本文为CSDN博主「等时钟成长」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/pangji0417/article/details/93353327