动态el-menu,折叠文字不隐藏、菜单导航折叠后文字不隐藏

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