el-table 鼠標(biāo)懸浮的變色樣式重置，看似是個(gè)簡(jiǎn)單的css的問(wèn)題，實(shí)則不然宪拥，下面來(lái)講一下處理方式

1. 簡(jiǎn)單的css處理（最普通的情況）

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

一般情況下這個(gè)方法可以解決問(wèn)題，如果不想影響所有表格給 el-table 一個(gè)class名

如果你碰到了和我一樣的問(wèn)題逞盆，固定了右列并且表格單獨(dú)有特殊色處理芽狗，被折磨得不清喉前，請(qǐng)聽(tīng)我細(xì)細(xì)道來(lái)

2. 復(fù)雜的處理方式（稍微有點(diǎn)麻煩）

首先說(shuō)一下項(xiàng)目概況：

a.有使用到特殊行顏色不同的處理令野，這個(gè)挺容易實(shí)現(xiàn)的 （ps：如有不懂可以看一下 官方文檔-帶狀態(tài)表格）

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

右側(cè)固定了一個(gè)列焰枢，就出現(xiàn)了很奇怪的bug蚓峦，鼠標(biāo)放置在左側(cè)第3行舌剂，右側(cè)固定行第2行單元格變色了，查看了一下css中一個(gè) hover-row 影響了樣式暑椰，很是無(wú)奈霍转，然后查了一下表格生成html的樣式隱約發(fā)現(xiàn)了問(wèn)題

image.png

至于為啥叫左側(cè)沒(méi)有滾動(dòng)因?yàn)槿绻麢M向滾動(dòng)了表格之后class會(huì)變，因此如果重置 is-scrolling-left 治標(biāo)不治本一汽，下面開(kāi)始第二步避消， el-table 正好提供了兩個(gè)回調(diào)

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;
}

解釋一下自己的思路，先獲取當(dāng)前行的下標(biāo)值召夹，然后通過(guò)原生js鼠標(biāo)移入事件給當(dāng)前行添加class岩喷、鼠標(biāo)移出事件當(dāng)前行移除class，顯然這是曲線救國(guó)的方式监憎，沒(méi)辦法el-table沒(méi)有提供固定行的解決方法纱意，十分痛苦，然而還是完美解決鲸阔，長(zhǎng)舒一口氣

最后偷霉，如果有不懂的朋友，歡迎留言褐筛，知無(wú)不言