el-menu侧边菜单栏收起不显示菜单名

最新推荐文章于 2024-05-28 14:51:46 发布

o0麦嘎

最新推荐文章于 2024-05-28 14:51:46 发布

阅读量629

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/Gpointy/article/details/130126795

博客指出在Vue项目中，菜单栏收起时菜单名称收起效果奇怪的问题，并给出解决办法，即在el-menu中添加collapse-transition属性，设置为“false”。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 问题如下

菜单栏收起时，会收起菜单的名称，效果看起来很奇怪
在这里插入图片描述

2. 解决

在el-menu 中添加collapse-transition属性：:collapse-transition=“false”
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

o0麦嘎

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue2 - 完美去掉隐藏 elementui 侧边导航菜单出现的滚动条，局部去掉 el-menu 菜单显示的滚动条

高级前端工程师

03-27

6278

element-ui侧边导航栏有滚动条，前端- 如何关闭elementUI左侧aside的滚动条，使用vue和element 导航菜单去除的滚动条，使用vue和element 导航菜单去除的滚动条，Vue elementui中侧边栏滚动条隐藏，Vue后台项目中如何去除左侧菜单栏滚动条，vue elementui 组件库的侧边栏出现滚动条，ElementUI侧边导航栏出现滚动条如何去除，element-ui侧边导航栏有滚动条，Vue elementui中侧边栏滚动条隐藏，使用vue和element导航菜单去

Vue3 - Element Plus 菜单侧边栏可拖动调整左右两侧宽度，el-menu菜单组件拖拽中间的分隔栏可调整布局宽度，后台管理系统左侧导航栏可拖曳自由调整大小（Menu菜单拖拽条，详细代码）

最新发布

资深程序员

04-03

6115

vue3，element-plus，el-menu，Menu菜单，Vue3+Element拖动侧边栏以便自由调整左右两侧的宽度，el-menu侧边栏可拖拽，右侧区域可自适应宽度，el-menu可拖拽侧边栏实现，菜单栏可以拖动改变宽度，vue3实现左侧导航菜单可拖拽改变左侧导航宽度，vue3中实现拖动调整左右两侧div的宽度(左右拖拽)，菜单可左右拖曳调整，vue3修改侧边导航栏宽度方法，vue3动态修改侧边菜单栏宽度，实现鼠标左右拖拽移动，去除滚动条，element拖动侧边栏以便自由调整左右两侧的宽度，vu

参与评论您还未登录，请先登录后发表或查看评论

vue使用elementui -- 举例：vue中使用elementui一级菜单名称不显示问题

Gyezi的博客

08-10

507

vue使用elementui -- 举例：vue中使用elementui一级菜单名称不显示问题

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

yuguang的博客

09-14

4972

1.动态菜单（递归模式） <template> <div> <template v-for="menu in menuTreeData">  <el-submenu v-if="menu.children" :key="menu.menuUrl" :index="menu.menuUrl"> <template slot="title">

Vue-cli实战项目14全局面包屑导航开发

weixin_42213903的博客

11-20

1219

文章目录上一章节面包屑导航基本实现通过路由数据生成完整代码下一章节上一章节 Vue-cli实战项目13 分离全局配置面包屑导航使用Element 的 Breadcrumb 面包屑组件来实现。显示当前页面的路径，快速返回之前的任意页面。 Breadcrumb 面包屑API 基本实现 <el-breadcrumb separator-class="el-icon-arrow-righ...

el-menu 该有的页面显示不出来第一个应该想到的问题首先就算检查是否多写了一个 , 导致显示不出来原有的页面

m0_74099927的博客

04-19

363

el-menu 该有的页面显示不出来第一个应该想到的问题首先就算检查是否多写了一个 , 导致显示不出来原有的页面。如图所示多写了一个，就会导致该有的页面显示不出来。

vue2 element-ui el-menu只有一个子菜单时父菜单不加载问题解决(vue-element-admin&&vue-admin-template)

qq_44776454的博客

05-28

1091

element-ui el-menu只有一个子菜单时父菜单不加载问题解决(vue-element-admin&&vue-admin-template)

Vue点击按钮控制左侧菜单显示隐藏-elementUI

TATOQOQ的博客

08-06

3400

<template> <div class="home-container"> <el-menu :collapse="isCollapse"> ... </el-menu> </div> <div> <span @click="isCollapse = !isCollapse"></span> </div> </template> <script> export def.

使用el-menu，菜单折叠后悬浮菜单不出现以及图标不显示的可能原因

Boneex的博客

05-22

5244

使用element-plus组件el-menu遇到的图标不显示，悬浮框不出现问题的解决方案

如何在Element UI中的el-menu侧边导航栏中，更改插槽title菜单项标题的颜色？

11-29

在Element UI的`el-menu`侧边导航栏中，更改插槽`<template slot="title">`中菜单项标题的颜色，可以通过CSS或者组件内动态设置来实现。以下是两种常见的方法： 1. **使用CSS**: 首先，在你的样式文件(`main.css`...

Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新

怡暘

08-03

3255

背景：在对项目进行bug走查的时候，测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新，当时我真的懵了，vue项目了router还能在当前页面进行再次刷新！！！我怀着疑惑上网查询、咨询足足使用了我3h，多宝贵的时间呀，就这么浪费掉了。最后，好歹，功夫不负有心人，还真有大佬讲到该部分的内容，通过自己尝试最终将问题解决。下面将我的问题解决方法分享给大家。参考：https://blog.csdn.net/tq1711/article/details/108386307?utm_medium=distrib

菜单栏隐藏

10-05

是一个能隐藏任何窗口的工具软件。用户可以任意指定要隐藏的窗口，然后在任何需要的时候按热键ait+x开启

后台左侧折叠菜单导航

01-12

网站后台左侧折叠菜单并且具有缓冲效果，更人性化，看起来有平滑的感觉，需要找类似jQuery效果的朋友不妨看看，也许对你所需的代码有帮助。

使用el-menu做侧边栏导航遇到需要点击两次菜单才展开

qq_37635012的博客

06-27

2062

如上图，在我第一次点击选中“告警管理”这个菜单的时候，外联监测它会立马收缩起来，当我第二次点击时就不会收缩，而是展开状态，这是因为我的el-menu里default-active和el-submenu的index及el-menu-item的index属性不一致导致的，

若依（ruoyi-vue）菜单名称过长显示不全

qq_34786108的博客

05-27

1997

若依修改左侧宽度地址我自己改了也不行，在“layout\components\Sidebar\SidebarItem.vue”加了一个 style="width: 1100px;"

elementUI侧边栏折叠后图标不显示文字不隐藏问题

luback的博客

06-02

1541

标签中的的图标和标题，不要。只需要注意两个细节地方。下的图标和标题，不要。

el-menu collapse时图标不见，文字和箭头没有隐藏问题

weixin_45190306的博客

04-26

1611

问题描述：使用el-menu时，菜单收缩和展开正常，但是存在以下两个问题。第二个问题好解决，有很多解答（注：不能加scoped，不然不起作用）以上作为一个记录，如果你们也遇到类似的问题，能帮得到你们就好。

elementplus实现左侧菜单栏收缩与展开

热门推荐

黎小小的博客

08-28

1万+

Home.vue下包含aside.vue和menu.vue。

解决：el-menu 菜单栏点击收起后label和图标不隐藏

DW14687的博客

07-26

1699

项目场景项目框架弄好，数据也联调完成了，结果要加菜单树。加上就出现问题啦，菜单栏点击收起按钮，label和图标不隐藏~

帮我看看这段代码在干什么：<template> <div :class="{ 'has-logo': showLogo }" tabindex="-1" @blur="onDivBlur" @focus="onDivFocus"> <SidebarLogo v-if="showLogo" :collapse="isCollapse" /> <el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu :default-active="activeMenu" :collapse="isCollapse" background-color="#001529" text-color="#FFF" :active-text-color="menuActiveTextColor" :unique-opened="false" :collapse-transition="false" mode="vertical" @select="handleSelect" > <SidebarItem v-for="route in routes" :key="route.id" :router-item="route" :base-path="route.path" :is-collapse="isCollapse" /> </el-menu> </el-scrollbar> </div> </template>

03-13

<think>嗯，用户让我帮他看看这段Vue组件的代码是干什么的。首先，我需要确定代码的结构和各个部分的作用。看起来这是一个侧边栏组件，可能用于导航菜单。首先看模板部分，最外层是一个div，绑定了class，根据showLogo的值决定是否有logo。还有@blur和@focus事件处理，可能处理焦点变化时的逻辑。然后里面有一个SidebarLogo组件，条件渲染，当showLogo为真时显示。接下来是el-scrollbar，应该是Element UI的滚动条组件，包裹着el-menu，也就是菜单组件。 el-menu有很多属性，比如default-active设置当前激活的菜单，collapse控制是否折叠，背景颜色和文字颜色，还有事件处理@select。然后循环遍历routes生成SidebarItem组件，每个路由项生成一个菜单项。需要解释每个部分的作用，比如div的class和事件，SidebarLogo的显示条件，el-scrollbar的作用，el-menu的配置项，以及SidebarItem如何生成菜单项。同时要说明整个组件的功能，比如响应式侧边栏，根据路由动态生成菜单，支持折叠和样式定制。还要注意用户可能不太熟悉Vue或Element UI，所以用词要通俗，结构清晰，分点说明。检查是否有遗漏的部分，比如activeMenu的计算属性，事件处理函数的作用，以及样式相关的配置如颜色。确保回答覆盖所有代码部分，并解释其协同工作的方式。</think>这段代码是一个Vue组件模板，主要用于构建管理系统类项目中的侧边栏导航菜单。以下是逐层解析： ### 一、容器层分析 1. 外层div：`<div :class="{ 'has-logo': showLogo }"...>` - 动态绑定`has-logo`类名，当`showLogo`为true时显示logo区域 - 通过`@blur`和`@focus`事件监听容器焦点变化 2. SidebarLogo组件： ```vue <SidebarLogo v-if="showLogo" :collapse="isCollapse" /> ``` - 条件渲染顶部logo区域 - 接收折叠状态参数`isCollapse`，用于控制logo显示模式 ### 二、滚动区域 ```vue <el-scrollbar wrap-class="scrollbar-wrapper"> ``` - 使用Element UI的滚动条组件 - 通过`wrap-class`自定义滚动容器样式类名 ### 三、菜单核心配置 ```vue <el-menu :default-active="activeMenu" // 当前激活菜单项 :collapse="isCollapse" // 折叠状态控制 background-color="#001529" // 菜单背景色（深蓝） text-color="#FFF" // 默认文本颜色（白色） :active-text-color="menuActiveTextColor" // 激活项文本颜色 :unique-opened="false" // 允许多个子菜单同时展开 :collapse-transition="false" // 禁用折叠动画 mode="vertical" // 垂直排列模式 @select="handleSelect" // 菜单项选择事件 > ``` - 使用Element UI的`el-menu`组件构建垂直导航菜单 - 深色主题配色方案（背景色#001529对应Ant Design暗色主题） ### 四、动态菜单项生成 ```vue <SidebarItem v-for="route in routes" :key="route.id" :router-item="route" :base-path="route.path" :is-collapse="isCollapse" /> ``` - 遍历`routes`数组生成菜单项 - 每个`SidebarItem`对应一个路由配置 - 传递路由路径和折叠状态参数 ### 五、协同工作机制 1. **数据驱动**：通过`routes`数组生成菜单结构，与vue-router配置联动 2. **状态联动**： - `isCollapse`控制菜单折叠/展开 - `activeMenu`实现路由激活状态同步 3. **样式系统**： - 通过$color变量实现主题色配置 - `has-logo`类名控制logo区域布局 4. **交互系统**： - 焦点事件处理可能的辅助功能需求 - @select事件处理菜单选择逻辑这是一个典型的后台管理系统侧边栏实现，具备路由联动、主题配置、响应式折叠等功能，通过组合Element UI组件和自定义组件构建可维护的导航系统。