el-table 鼠标悬浮时样式的修改

前言

项目中表格做了一个功能当搜索时,将搜索出的行进行高亮显示。比如:
在这里插入图片描述
但是客户最近提了个问题,希望鼠标移入时高亮颜色不要变。

解决

鼠标移入颜色改变是引入当鼠标移入时,tr上自动添加了一个hover-row的样式,这个在控制台中开源清晰的看到
在这里插入图片描述
有问题当然先百度一下看看有没有解决方案,查到的到多少解决方案都是下面这个:

 /deep/.el-table__body tr:hover > td{
     background-color:transparent !important;
 }

但是这种方案有个问题,那就是存在固定列时会出现一边解决另一个有问题的情况,如下图:
在这里插入图片描述
最后是如何解决的呢?翻了一下源码,可以看到:
在这里插入图片描述
既然源码这样写,那咱就这样改

/deep/ tr.hover-row {
    &, &.el-table__row--striped {
    &, &.current-row {
        > td.el-table__cell {
        background-color: transparent;
        }
    }
    }
}

最终效果
在这里插入图片描述

注:
这里说一下设置成透明的原因,如果将颜色设置为高亮的颜色,对于高亮行是没有影响,但是对于非高亮行来说,当鼠标悬浮时会出现一个高亮的效果,这与需求是不符的。

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无知的小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值