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

前言

项目中表格做了一个功能当搜索时，将搜索出的行进行高亮显示。比如：

但是客户最近提了个问题，希望鼠标移入时高亮颜色不要变。

解决

鼠标移入颜色改变是引入当鼠标移入时，tr上自动添加了一个hover-row的样式，这个在控制台中开源清晰的看到

有问题当然先百度一下看看有没有解决方案，查到的到多少解决方案都是下面这个：

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

但是这种方案有个问题，那就是存在固定列时会出现一边解决另一个有问题的情况，如下图：

最后是如何解决的呢？翻了一下源码，可以看到：

既然源码这样写，那咱就这样改

/deep/ tr.hover-row {
    &, &.el-table__row--striped {
    &, &.current-row {
        > td.el-table__cell {
        background-color: transparent;
        }
    }
    }
}
1
2
3
4
5
6
7
8
9

最终效果

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