element-ui 使用span-method表格合并后hover样式的处理

<el-table
  :data="tableData2"
  :row-class-name="isCell ? setCellClass : ‘‘" // 动态添加样式
  border
  @cell-mouse-enter="handleMouse" // 单元格移入事件
  @cell-mouse-leave="handleMouseLeve" // 单元格移出事件
  style="width: 100%"
  ref="checkTable"
  :span-method="objectSpanMethod">
  <el-table-column
    type="selection"
    reserve-selection
    width="55">
  </el-table-column>
  ...
</el-table>

// js method方法
// 处理表格数据
  handleTable () {
    let a = 0
    this.tableData2.forEach((item, index) => {
      // 给每一个数据加一个index,从1开始
      item.index = index + 1
      // 把满足合并条件的行的索引保存起来
      if (item.index % 3 === 1) { // 表格合并条件
        a = item.index
      } else {
        item.col = a
      }
    })
  },

  // 单元格合并方法
  objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      if (rowIndex % 3 === 0) {
        return {
          rowspan: 3,
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  },

  // 单元格移入事件
  handleMouse (row, column, cell, event) {
    if (row.index % 3 !== 1) { // 不符合合并行的条件手动加class
      // 只能给第一行加才有效, 把之前保存的第一行的索引存起来
      this.cellIndex = row.col
      this.isCell = true
    }
  },

  // 单元格移除事件
  handleMouseLeve () {
    this.isCell = false
  },

  // 设置行样式
  setCellClass ({row, column, rowIndex, columnIndex}) {
    // 给当前鼠标移入的合并行第一行加上样式名
    if (row.index === this.cellIndex) {
      return ‘cellClass‘
    }
  }

CSS样式
.el-table {
  border: 1px solid rgba(227, 228, 231, 1);
  .cellClass {
    .el-table-column--selection {
      background-color: #ebf7ff;
    }
  }
}