elementui//el-menu 的 mode设为horizontal 后，横向后，有bug。el-menu 下如果引用组件，组件模板的 div 也会渲染，阻断了样式！！！

最新推荐文章于 2024-01-03 11:16:44 发布
最新推荐文章于 2024-01-03 11:16:44 发布
阅读量6.2k 收藏 4
点赞数 3
分类专栏： 踩坑系列 vue 插件、样式库 文章标签： elementui css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37877794/article/details/120111665
版权

文章目录


el-menu 的 mode设为horizontal 后，横向后，有bug。【遇到问题要耐心，耐心看报错！一个一个试！松松也是这样耐心找】【（对比模板，一个一个查，发现多了div）（超载的问题，一段一段代码注释，然后找到）】
el-menu 下如果引用组件，组件模板的 div 也会渲染，阻断了样式！！！

出现如下图样式被 div 阻断导致的问题
在这里插入图片描述

如何找问题？——把我自己的和element的模板对比，找问题。一步一步来。

ul 下 接 li 不会阻断样式
但由于el-menu 下用了我自己写的组件，模板中的 div 也渲染进去了，所以就样式没了。
在这里插入图片描述

最低0.47元/天 解锁文章
爱吃松果的美美
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
element-ui的NavMenu置于顶部(mode="horizontal")时,让菜单可以滚动(overflow-x:auto)(主要用于移动端的菜单显示)...
weixin_30616969的博客
05-29 3004
说实话，写样式看似简单，其实有时候也会遇到很多坑。留下一笔，供参考（有点啰嗦，可以直接拖到最后看最后两行）。 这次是做一个PC端和移动端同时适用的项目，菜单的展示就成了一个问题。 　　于是我判断了用户设备（具体见本人的另一篇随笔：https://www.cnblogs.com/nuonuo-D/p/10516626.html），设了一个变量isMobi（移动端值为true,PC端值为...
vue更改element菜单组件el-menu为横向展开状态
weixin_44100002的博客
01-28 1万+
更改组件为横向展开后可以实现类似商品分类的样式，并且触发菜单展开的方式为点击，el-menu组件collapse参数
Vue + ElementUI 实现后台管理系统模板 -- 前端篇（四）：定义主页面
12-07 4127
一、定义主页面 主页面 可以拆分成多个组件，每个组件负责一部分页面的显示。 　　拆分成 Header、Aside、Footer、Content 四个页面。 其中： 　　Header 用于定义导航栏信息 　　Aside 用于定义菜单栏信息 Footer 用于定义底部信息 　　Content 用于显示各个菜单选项的页面 1》config配置路径 （1）简介 （2）安装 npm install path ...
日常开发笔记
圆圆的 JavaScript 博客
11-10 1255
快速记录要记录的笔记
vue菜单横向展示
Xiaolizhang_sf的博客
04-24 6866
横向显示列 //横向展示需要样式修改 .el-menu--horizontal .el-menu-item { float: left; height: 60px; line-height: 60px; margin: 0; border-bottom: 2px solid transparent; border-bottom-width: 2px; border-bottom-...
Elementui中El-menu导航栏
06-09 1万+
el-menu官方文档：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/menu 导航栏水平时去除底部白边： 注意：水平时去除底部白边是用的新添加的style标签实现的。其他方式不行，如用::deep，或者直接在原来的style中改，都不行 侧边栏展开时宽度：
element UI 对导航el-menu 样式的修改
黑眼圈
03-08 1万+
** element UI 对导航el-menu 样式的修改 ** .el-menu--horizontal > .el-submenu .el-submenu__title, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title, .el-submenu__title i { color: #fff; } .el-menu--horizontal > .el-submenu.is-active .el-subme
react-horizontal-scrolling-menu:React的水平滚动菜单组件
04-18
React水平滚动菜单 请帮助我测试<--- 这是React的水平滚动菜单组件。 菜单组件具有自适应宽度，只需为父容器设置...import ScrollMenu from 'react-horizontal-scrolling-menu' ; import './App.css' ; // list o
Element-Ui组件 NavMenu 导航菜单的具体使用
10-16
在水平模式下，`el-menu`组件可以通过`:default-active`属性设置默认激活的菜单项，`mode="horizontal"`定义为水平模式。`@select`事件监听用户点击菜单项时触发，通常用来更新活动状态或执行相关操作。例如： ``...
vue-horizontal-timeline:只是使用Vue.js制作的一个简单的水平时间轴组件
04-28
$ npm install vue-horizontal-timeline --save 纱线（推荐） $ yarn add vue-horizontal-timeline 快速开始 Vue.js 您可以导入main.js文件 import Vue from "vue" ; import VueHorizontalTimeline from "vue-...
详解如何在vue项目中引入elementUI组件
08-28
Vue项目中引入ElementUI组件详解 ElementUI是一个基于Vue的前端组件库，提供了丰富的UI组件，帮助开发者快速构建高质量的Web应用程序。本文将详细介绍如何在Vue项目中引入ElementUI组件，实现快速构建美观的Web应用...
设置导航路由
m0_58017645的博客
08-24 661
业务：实现导航路由的切换（采用路由跳转，不采用a链接跳转）。用户在点击”农业资讯“导航时，地址栏会有相应的url地址，若将该地址复制发送给别人，别人通过该地址访问能够显示对应的导航页 如：Url地址为实时气象与农情http://localhost:8082/AgrometeorologyPage/RealMeteorologyAndAgricultural 复制发送，新页签打开： 效果如下 ： 具体实现： 1.使用ant design vue中的menu导航组件渲染页面 ..
Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
热门推荐
无解的菜鸟晖 的博客
12-02 4万+
一、目的 后台管理系统页面的整体结构如图： 实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。 二、效果图 三、具体操作实现 1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图： 2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位和大小设定。 使用 el-menu 组件的 mode ...
element-ui菜单el-menu的使用
m0_63040701的博客
05-28 1万+
el-menu详解。
前端学习（十）导航栏功能优化
lsjweiyi的博客
07-29 997
上篇实现了基本的导航栏功能，还有几个体验上的问题： 首先他没法看出来当前选中了哪个页面，没点明显的提示 只有点击文字才能路由，点边边那些位置是不行的 过于简单，没有复杂的嵌套 本篇就改善这些问题。 解决第二个点击文字才能路由的问题 查着查着资料，发现第二个问题先解决。原来el-menu自带有router属性，设置该属性后就能自己路由了，不需要再引入router-link，所以代码改成下面这样： <template> <div id="app" style="margin: 0"&g
Vue项目菜单导航封装（一级菜单在上面，二级三级菜单在左侧）
qq_45256497的博客
03-25 1万+
Vue项目菜单导航封装（一级菜单在上面，二级三级菜单在左侧），element-ui菜单导航封装
论el-menu自定义样式
最新发布
song_song0927的博客
01-03 944
el-menu自定义样式,修改第三方组件的样式
menu 中的mode属性默认是垂直展示
m0_47630333的博客
07-06 783
el-menu中的 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式，另外，在菜单中通过subment组件可以生成二级菜单
element-ui 导航栏的样式修改
weixin_44479794的博客
05-16 3888
::v-deep .el-menu-item { background-color: #EBEEF5; height: 20px; line-height: 20px; } .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title { height: 20px; line-height: 20px; } .el-submenu /deep/ .el-subme
假设你是高级前端开发工程师请我帮我看看为什么我这段代码，如果我停留在第三页views刷新会发生闪烁<el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal"> <el-menu-item index="/">首页Home</el-menu-item> <el-menu-item index="/about/">第二页About</el-menu-item> <el-menu-item index="/three/">第三页views</el-menu-item> </el-menu>
07-10
从您提供的代码来看，您使用了Element UI的`<el-menu>`组件，并且通过`router`属性和`$route.path`来设置当前激活的菜单项。 根据您的描述，如果您停留在第三页`/three/`刷新会发生闪烁的问题，可能是因为刷新时路由的变化导致菜单项重新渲染，从而引起闪烁。 为了解决这个问题，您可以尝试对菜单项添加`exact`属性，确保路由匹配时才激活对应的菜单项。修改后的代码如下： ```vue <template> <el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal"> <el-menu-item index="/" exact>首页Home</el-menu-item> <el-menu-item index="/about/" exact>第二页About</el-menu-item> <el-menu-item index="/three/" exact>第三页views</el-menu-item> </el-menu> </template> ``` 通过添加`exact`属性，只有当路由完全匹配时，对应的菜单项才会激活。这样在刷新时不会出现闪烁现象。 希望这个解决方案能够解决您的问题！如果还有其他疑问，请随时提问。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值