doubleyong
管理员
管理员
  • 最后登录2026-05-25
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:12813回复:5

[vue]【求助】vue中使用el-submenu,在折叠时,文字不隐藏

楼主#
更多 发布于:2020-04-18 22:46
在做权限管理时,出现了一个bug,眼睛都看花了。
bug描述:在收起菜单时,子菜单的el-submenu的文字不隐藏
找了好久没有找到原因,哈哈,在线求助


效果如下图:

图片:role.png





代码如下:


Home.vue

<template>
  <div>
    <h2>欢迎来到doubleyong 后台管理系统</h2>
    <div class="leftMenu">
      <Menus :menuList="getMenuInfo"></Menus>
    </div>
    <div class="rightMenu">
      <!-- 显示右边菜单 -->
      <router-view>
      </router-view>
    </div>
  </div>
</template>


Menu.vue
<template>
    <div>
    <!-- 显示左边菜单 -->
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
      <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
      :default-active="$route.path"
      router
      mode="vertical"
      active-text-color="#409EFF"
      v-if="menuList"
      :collapse="isCollapse"
      class="el-menu-vertical-demo"
    >
      <MenuTree :menuList="menuList"></MenuTree>
    </el-menu>
      </el-scrollbar>
    </div>
</template>


MenuTree.vue
<template>
  <div>
    <template v-for='menu in menuList'>
      <!-- 如果当前有子菜单,则显示 el-submenu ,在el-subment 里调用 递归组件 -->
      <el-submenu
        v-if='menu.menuChilds.length>0'
        :index='menu.menuUrl'
        :key="menu.menuId"
      >
        <template slot="title">
          <i v-if="menu.menuImgClass" :class="menu.menuImgClass"></i>
          <span slot="title">pw_ menu.menuName </span>
        </template>
        <!-- 调用自身  此处是重点-->
        <MenuTree :menuList='menu.menuChilds'></MenuTree>
      </el-submenu>
      <!-- 如果没有子菜单,则显示当前内容 -->
      <el-menu-item
        v-else
        :index='menu.menuUrl'
        :key='menu.menuId'
      >
        <i v-if="menu.menuImgClass" :class="menu.menuImgClass"></i>
          <span slot="title">pw_ menu.menuName </span>
      </el-menu-item>
    </template>
  </div>
</template>


回帖推荐

真知棒、 发表于5楼  查看完整内容

你试一下不使用div,把div改为<template>看可以吗,参考: https://blog.csdn.net/qq_40580023/article/details/103778414
知识需要管理,知识需要分享
真知棒、
侠客
侠客
  • 最后登录2021-05-12
  • 发帖数36
  • 社区居民
沙发#
发布于:2020-04-30 14:12
doubleyong:ok了,写的组件遍历,必须要有一个根节点<div>不能改成<template>, 解决方法:只有自己写样式隐藏回到原帖
好的,学到了,哈哈
doubleyong
管理员
管理员
  • 最后登录2026-05-25
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
板凳#
发布于:2020-04-28 20:46
真知棒、:你试一下不使用div,把div改为<template>看可以吗,参考:https://blog.csdn.net/qq_40580023/article/details/103778414回到原帖
ok了,写的组件遍历,必须要有一个根节点<div>不能改成<template>, 解决方法:只有自己写样式隐藏
知识需要管理,知识需要分享
doubleyong
管理员
管理员
  • 最后登录2026-05-25
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
地板#
发布于:2020-04-22 16:58
试了,不行
知识需要管理,知识需要分享
doubleyong
管理员
管理员
  • 最后登录2026-05-25
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
4楼#
发布于:2020-04-20 16:55
好的,非常感谢
知识需要管理,知识需要分享
真知棒、
侠客
侠客
  • 最后登录2021-05-12
  • 发帖数36
  • 社区居民
5楼#
发布于:2020-04-20 16:53
你试一下不使用div,把div改为<template>看可以吗,参考:https://blog.csdn.net/qq_40580023/article/details/103778414
游客


返回顶部

公众号

公众号