element ui组件库的el-menu当前选中项背景进行修改

最新推荐文章于 2024-03-06 15:29:51 发布
原创 最新推荐文章于 2024-03-06 15:29:51 发布 · 3.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

博客介绍了直接对类进行CSS修改的方法，这在前端开发中可用于调整页面元素样式，属于信息技术领域前端开发范畴。

直接对.el-menu-item.is-active类进行css修改

.el-menu-item.is-active {
   background-color: rgb(48,105,132) !important;//你要修改的颜色
}
vue3 使用element-ui的el-menu刷新之后保持选中状态
jieweiwujie的博客
02-26 1544
3、点击链接是可以完美做到刷新后会保持选中状态，但是当我们手动输入路由的时候，页面会跳转但是css样式不会改变。当输入的路由和当前的路由不一样的时候。把当前的路由赋值给activeIndex。mounted函数中把这个当前路径赋值给 activeIndex 即赋值给了 default-active 参数。第一次访问的时候sessionStorage是空的，所以要加入默认的路径。官网示例给出的是2个参数key和keyPath，分别打印出来后是一样的都是当前的路径。
pc端侧边菜单封装组件（使用element-ui组件库中el-menu组件）
yycnf的博客
06-28 651
pc端侧边菜单封装组件 使用布局容器组件布局 <el-container> <!--头部组件--> <el-header>Header</el-header> <el-container> <!-- 侧边菜单组件 --> <el-aside :width="isShowMenu ? '64px !important' : '15% !important'"> <div cl
点击Element侧栏导航，顶栏导航的高亮背景效果不消失问题；以及解决刷新导航菜单栏高亮效果消失的问题
qq_39918566的博客
05-12 1383
一、问题描述 1）点击侧栏导航后，顶栏导航的高亮效果还在（问题图片如下，问题已解决）。 2）达到的目的：点击侧栏导航后顶栏导航的高亮背景消失；点击顶栏导航时侧栏导航的高亮效果消失。 二、实现过程 使用了Select（菜单激活回调），清空了左侧菜单栏的高亮样式。以下是部分代码，以顶栏导航的为例子，侧栏导航同理可实现。 1.HTML部分： <!-- 顶栏菜单 activeIndex是data里面的一个参数--> <el-menu router :default-acti
vue.js el-menu-item 更改选中的背景颜色
carbonzhao的专栏
09-18 1211
【代码】vue.js el-menu-item 更改选中的背景颜色。
elementui更改导航栏菜单选中项背景颜色
weixin_74264934的博客
10-17 2406
【代码】elementui更改导航栏菜单选中项背景颜色。
vue---el-menu-item更改导航菜单栏选中的背景颜色
weixin_44753918的博客
03-25 2830
【代码】vue---el-menu-item更改导航菜单栏选中的背景颜色。
el-menu设置选中项背景色和鼠标移上背景色；el-tab鼠标移上效果
weixin_63896561的博客
04-28 2742
/修改鼠标移动到表头时候字体颜色，默认淡蓝色。
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...
element 中 el-menu 组件的无限极循环思路代码详解
10-15
本文详细探讨了如何在 Element UI 中使用 el-menu 组件实现无限极循环菜单，即菜单项的子菜单项还可以拥有自己的子菜单，形成一个嵌套的结构。 为了实现无限极循环菜单，需要进行组件嵌套，即在 el-menu 组件内部...
【修改el-menu主菜单和子菜单悬浮的背景色】
weixin_44995829的博客
10-18 1万+
【修改el-menu主菜单和子菜单悬浮的背景色】
解决elementui 侧边次级菜单去除背景颜色问题
jichunhui1992的博客
01-07 1431
.el-submenu_title:hover{ background-color:transparent; } 使用unset会有ie的兼容性问题哦！
vue element ui修改导航菜单栏鼠标悬浮时的背景颜色和点击二级菜单时多出的一像素边框问题
热门推荐
qq_43628847的博客
08-30 1万+
通过浏览器调试找到 复制粘贴后，修改颜色 /* 修改导航菜单栏悬浮时的背景颜色 / .el-submenu__title:hover, .el-menu-item:focus, .el-menu-item:hover{ background-color: cornflowerblue; } / 导航二级菜单栏点击之后的一像素边的问题 */ .el-menu{ border-right: none; } ...
去除element-UI表格鼠标悬停背景颜色
以爱护甲,爱满枫林。
03-25 2463
去除element-UI表格鼠标悬停背景颜色 .el-table tbody tr:hover > td { background-color: unset !important }
论el-menu自定义样式
song_song0927的博客
01-03 1655
el-menu自定义样式,修改第三方组件的样式
修改vue-element-admin中导航菜单被激活后的背景色
weixin_55966654的博客
10-28 3533
修改vue-element-admin被选中后的菜单背景色
element框架里面el-menu-item选中颜色延迟显示
weixin_46031207的博客
05-25 579
点击标签时候选中颜色不显示或者延迟显示。切换tab的时候颜色可以正常显示！
element-ui修改el-menu样式记录：设置菜单背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式
最新发布
个人博客
03-06 7438
menu菜单透明，则背景图片能正常显示。
element ui el-menu组件
m0_63466615的博客
02-10 3797
1.组件需要先写在<el-menu></el-menu>里面 2.一点此单就能显示东西或进入路由的就用 <el-menu-item></el-menu-item>实现 3.点了展开下一级菜单的要写在 <el-submenu> <template slot=‘title’>标题文本</template> <el-menu-item></el-menu-item> </el-subme
更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线
Y2960018173的博客
12-05 3100
【代码】更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线。
使用element-ui的el-menu导航选中后刷新页面保持当前选中
06-02
在element-ui的el-menu中，可以使用`router-link`来实现路由跳转，这样在切换路由时就可以保持当前选中的菜单项。具体实现步骤如下： 1. 在el-menu中使用`router-link`组件来实现路由跳转，如下所示： ``` <el-menu default-active="1" class="el-menu-vertical-demo" router> <router-link to="/home"> <el-menu-item index="1"><i class="el-icon-menu"></i>首页</el-menu-item> </router-link> <router-link to="/about"> <el-menu-item index="2"><i class="el-icon-menu"></i>关于我们</el-menu-item> </router-link> <router-link to="/contact"> <el-menu-item index="3"><i class="el-icon-menu"></i>联系我们</el-menu-item> </router-link> </el-menu> ``` 2. 使用Vue Router的`router-link-active`指令来自动设置菜单项的选中状态，如下所示： ``` <el-menu default-active="1" class="el-menu-vertical-demo" router> <router-link to="/home" router-link-active="active"> <el-menu-item index="1"><i class="el-icon-menu"></i>首页</el-menu-item> </router-link> <router-link to="/about" router-link-active="active"> <el-menu-item index="2"><i class="el-icon-menu"></i>关于我们</el-menu-item> </router-link> <router-link to="/contact" router-link-active="active"> <el-menu-item index="3"><i class="el-icon-menu"></i>联系我们</el-menu-item> </router-link> </el-menu> ``` 3. 在样式中定义`.active`类来设置选中状态的样式，如下所示： ``` .active { background-color: #409EFF !important; color: #fff !important; } ``` 这样就可以实现在el-menu中保持当前选中的菜单项，并在切换路由时自动更新选中状态。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值