关于el-table鼠标悬浮变色深层讲解

el-table 鼠标悬浮的变色样式重置，看似是个简单的css的问题，实则不然，下面来讲一下处理方式

1. 简单的css处理（最普通的情况）

.el-table__body tr:hover>td{
  background: rgba(0, 0, 0, 1);
}

一般情况下这个方法可以解决问题，如果不想影响所有表格给 el-table 一个class名

如果你碰到了和我一样的问题，固定了右列并且表格单独有特殊色处理，被折磨得不清，请听我细细道来

2. 复杂的处理方式（稍微有点麻烦）

首先说一下项目概况：

a.有使用到特殊行颜色不同的处理，这个挺容易实现的 （ps：如有不懂可以看一下 官方文档-带状态表格）

// html
<el-table :row-class-name="tableRowClassName"></el-table>
// js
methods: {
  tableRowClassName({ row, rowIndex }) {
    if (row.deployStatus == 0) {
      return "warning-row"
    } else {
      return '';
    }
  }
}

右侧固定了一个列，就出现了很奇怪的bug，鼠标放置在左侧第3行，右侧固定行第2行单元格变色了，查看了一下css中一个 hover-row 影响了样式，很是无奈，然后查了一下表格生成html的样式隐约发现了问题

image.png

至于为啥叫左侧没有滚动因为如果横向滚动了表格之后class会变，因此如果重置 is-scrolling-left 治标不治本，下面开始第二步， el-table 正好提供了两个回调

b.灵活使用 @cell-mouse-enter 和 @cell-mouse-leave （ps：如有不懂可以看一下 官方文档-事件处理）

// html
<el-table
  :row-class-name="tableRowClassName"
  @cell-mouse-enter="mouseEnter"
  @cell-mouse-leave="mouseLeave"
></el-table>
// js
methods: {
  mouseEnter(row, column, cell, event) {
    let _index = this.list.indexOf(row)
    if(document.getElementsByClassName('el-table__body-wrapper')[0].getElementsByTagName('tbody')[0].children[_index].className){
      document.getElementsByClassName('el-table__body-wrapper')[0].getElementsByTagName('tbody')[0].children[_index].classList.add('table-hide-color')
      document.getElementsByClassName('el-table__fixed-right')[0].getElementsByTagName('tbody')[0].children[_index].classList.add('table-hide-color')
    }
  },
  mouseLeave(row, column, cell, event) {
    let _index = this.list.indexOf(row)
    if(!document.getElementsByClassName('el-table__body-wrapper')[0].getElementsByTagName('tbody')[0].children[_index]){
    
    } else {
      document.getElementsByClassName('el-table__body-wrapper')[0].getElementsByTagName('tbody')[0].children[_index].classList.remove('table-hide-color')
      document.getElementsByClassName('el-table__fixed-right')[0].getElementsByTagName('tbody')[0].children[_index].classList.remove('table-hide-color')
    }
  }
}
// css
.table-hide-color>td{ 
  background: #fafafa!important;
}
.site-table .el-table__body tr.hover-row>td{
 background: #fff;
}

解释一下自己的思路，先获取当前行的下标值，然后通过原生js鼠标移入事件给当前行添加class、鼠标移出事件当前行移除class，显然这是曲线救国的方式，没办法el-table没有提供固定行的解决方法，十分痛苦，然而还是完美解决，长舒一口气

最后，如果有不懂的朋友，欢迎留言，知无不言