(element-ui)取消el-table的hover状态，取消高亮显示

---

前言

在使用element-ui的el-table表格的过程中，会发现，虽然框架的表格很好用很方便，emmmm，确实很好用，但是有一些烦人的甲方却不想要，table的浮现效果，特别是，单独给单元格设置了背景颜色之后，这个hover状态会覆盖掉自定义的单元格的背景颜色，是不是很烦人，是不是很抓狂，我也是从网上搜罗了一大串的解决方法，这边就一一做一下总结。

方法一 ------覆盖css样式

使用css覆盖的方法，修改掉他默认的hover状态的颜色。例如：

.el-table tbody tr:hover>td {
            background-color:#f5f5f5 !important //修改成自己想要的颜色即可
        }

或者

.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,  .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
  background-color: #f5f5f5  !important;
  }

但是这个方法显而易见，只支持修改一种颜色，像如下这种情况就不能使用

由于列有背景颜色的缘故，修改css样式的话，显然当鼠标hover上去的时候，有颜色的单元格还是会被覆盖掉原来的颜色！
所以这种方法只适用于背景颜色统一的表格！

方法二------卸载掉背景颜色（类似于方法一）

代码如下（示例）：

.el-table tbody tr:hover>td {
            background-color:unset !important //修改成自己想要的颜色即可
        }

或者

.el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,  .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
  background-color:unset !important;
  }

方法三------使用函数方法

在el-tavle中加入如下属性，强制让单元格渲染成固定颜色，这个方法也可取，但是遇到需要变色的单元格，显然就使用不了，问题显然又回到了方法一的缺陷之中去了。
但在单一背景色的表格中可取！！！

:cell-style="{background: 'revert'}"

方法四------禁用鼠标悬浮

将所有事件禁用，虽然不会触发el-table的hover效果，也支持不同颜色的单元格，BUT!!
！！！这种方法将导致表格的点击事件无法使用，例如表格最后一列的一些弹窗、或者一些删除、修改或者添加等操作将无法使用！！！

.el-table tbody tr {
    pointer-events: none;
  }

这种方法最为鸡肋，最不推荐！！！

如果广大网友有更好的取消hover状态的方法，欢迎在底下留言！！！
我这个也是没有办法的办法！害**