el-table 修改鼠标悬停时修改当前行和列的背景色，高亮显示

el-table 修改鼠标悬停时修改当前行和列的背景色，高亮显示

直接上代码

1）悬停时修改当前行的背景色,如果这样不生效，给el-table手动添加一个类名，然后在加在::v-deep前面

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

2）悬停时修改当前列的背景色
修改列的背景色时不能直接操作css，我是这样写的

cellMouseEnter(e, row, cell, column) {
        var selrange = document.getElementsByClassName(row.id)
        console.log('row', row)
        console.log('cell', cell)
        console.log('selrange', selrange)
        if (this.formConfig.isNoHoverColor) {
          cell.style.backgroundColor = ''
          for (var i = 0; i < selrange.length; i++) {
            selrange[i].style.backgroundColor = ''
          }
        } else {
          cell.style.backgroundColor = '#e6e8ea'
          for (var i = 0; i < selrange.length; i++) {
            selrange[i].style.backgroundColor = '#e6e8ea'
          }
        }
      },

以上是el-table自带的鼠标滑入和滑出单元格时触发的方法，其中row为该行的元素信息，只要是同一列的单元格，其id是一样的，可以根据这个线索来修改列的样式，cell是当前单元格，若要改列的话也需要单独修改当前悬停的单元格的样式。我这里的isNoHoverColor是来控制需不需要修改列的背景色，根据需求不同，若业务需求要求所有表格全要修改列的背景色，则可以直接取else里面的代码

3）离开时恢复原始样式

cellMouseLeave(e, row, cell) {
        var selrange = document.getElementsByClassName(row.id)
        for (var i = 0; i < selrange.length; i++) {
          selrange[i].style.backgroundColor = ''
        }
      }

至此结束！！！