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

最新推荐文章于 2024-05-27 14:23:55 发布
最新推荐文章于 2024-05-27 14:23:55 发布
阅读量2.9k 收藏 5
点赞数
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_iosers/article/details/110131654
版权

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

.el-menu-item.is-active {
   background-color: rgb(48,105,132) !important;//你要修改的颜色
}
一个假的前端男
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...
修改element的菜单组件使其变为酷炫风格
nick_zhang的博客
11-10 1227
首先选给整个头部加背景图，其次munu中配置的background是对所有菜单都生效的，但我们不想改变父菜单，我们就把父菜单修改为transparent，最后为了让父菜单hover时产生平行四边形，利用伪元素配合 transform: skewX(-45deg)，并且因为父元素时透明的，所以加z-index:1让图形显示出来。
el-menu设置选中项背景色和鼠标移上背景色；el-tab鼠标移上效果
weixin_63896561的博客
04-28 2148
/修改鼠标移动到表头时候字体颜色，默认淡蓝色。
element ui 中el-tree修改背景色及选中的颜色鼠标悬停颜色
最新发布
weixin_72127453的博客
05-27 506
修改el-tree颜色
设置高亮当前菜单项
weixin_57334089的博客
10-18 1020
目标 当左侧的某一菜单处于选中状态时，对它高亮显示 分析 当某个菜单处于选中状态时，el-menu自动会有一个特殊的类.is-active，所以我们补充一个css类就可以了。 操作 在 src\styles\sidebar.scss文件中， 在el-menu下添加一个is-active类，样式如下 .el-menu { // 省略其他 .is-active { background-color: $menuText !important; span{ col
vue---el-menu-item更改导航菜单栏选中的背景颜色
weixin_44753918的博客
03-25 1817
【代码】vue---el-menu-item更改导航菜单栏选中的背景颜色。
elementUI的Menu组件高亮问题并保存所选高亮
qq_44906497的博客
09-21 979
3. 在created中赋值。1. 在vuex中存储。2. 提交给vuex。
element ui el-menu组件
m0_63466615的博客
02-10 3335
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 导航菜单的具体使用
10-16
Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的界面元素，使得开发者能够快速构建美观、响应式的Web应用。NavMenu是Element-UI中的一个核心组件，用于创建导航菜单，可以支持水平和垂直两种模式，适用于...
element-ui tooltip修改背景颜色和箭头颜色的实现
01-19
本文介绍了element-ui tooltip修改背景颜色和箭头颜色的实现，分享给大家，具体如下： <el class=item effect=dark content=分享 placement=left popper-class=draw_share_atooltip> <el> <div class=iconfont>...
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 ...以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue开发实例（11）之el-menu实现左侧菜单导航
编程界明世隐的博客
05-02 4万+
el-menu实现左侧菜单导航 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单
element导航栏修改悬停及选中样式
weixin_48111439的博客
11-27 1万+
Element -导航栏修改悬停及选中样式 element导航栏修改悬停及选中样式 **修改导航栏样式时el-menu-item和el-submenu有区别 el-menu-item在scoped中设置值是可以的，而el-submenu在scoped中设置值不起作用 原效果 el-menu-item部分 <style lang="less" scoped> .el-menu-demo { height: 92px; font-weight: bold; } //设置了行高和字体大小、高
element ui修改select选择框背景色和边框色
weixin_47194802的博客
11-16 6008
要添加class="custom-select"修改选择框的背景色和边框色。
elementui更改导航栏菜单选中项背景颜色
weixin_74264934的博客
10-17 1829
【代码】elementui更改导航栏菜单选中项背景颜色。
element ui中侧导航栏el-menu修改颜色＜template slot=“title“＞分组一＜/template＞(菜单标题)无法修改问题
qq_38916157的博客
11-18 5123
template中 <el-submenu index="2"> <template slot="title"> 订单</template> <el-menu-item index="2-1">订单管理</el-menu-item> <el-menu-item index="2-2">订单详情</el-menu-item> </el-subme
element更改导航菜单被选中项的背景颜色
热门推荐
AHRL__的博客
06-29 6万+
element更改导航栏被选中项的背景颜色 在使用element的导航栏菜单时，官方文档指明可以改变导航栏的的背景颜色，字体颜色以及选中项的字体颜色，但是有时我们想要使用自定义颜色。在F12中可以看见，在设置了官方文档中的background-color、text-color、active-text-color后，element将这些样式添加到了element.style中。如下： eleme...
element框架里面el-menu-item选中颜色延迟显示
weixin_46031207的博客
05-25 386
点击标签时候选中颜色不显示或者延迟显示。切换tab的时候颜色可以正常显示！
使用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、付费专栏及课程。

余额充值