el-table合并，处理合并产生的样式bug，更换行hover

样式未全部覆盖
合并效果
hover行效果
选中行效果

<template>
  <el-table
    stripe
    :data="list"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave"
    :row-class-name="rowPreDetailClass"
    :cell-style="set_cell_style"
    :span-method="objectSpanMethod"
  >
    <el-table-column type="selection" />
    <el-table-column prop="rcptNo" label="单号" />
    <el-table-column prop="itemName" label="项目名称" />
    <el-table-column prop="itemClass" label="类别" />
    <el-table-column prop="amount" label="收费数量" />
    <el-table-column prop="ktAmount" label="可退数量" />
    <el-table-column prop="refundAmount" label="申退数量" />
    <el-table-column prop="refundCharges" label="退费金额" />
    <el-table-column prop="charges" label="收费金额" />
    <el-table-column prop="refundReason" label="退费原因" />
    <el-table-column prop="refundedAmount" label="已退数量" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      multipleSelection: [],
      //被聚焦的标识
      currentHoverId: null,
      // 被点击行信息
      info: "",
      // 用于存放每一行记录的合并数
      spanArr: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      list().then(res => {
        this.list = res.data;
        // 初始化调用合并函数
        this.getSpanArr(this.list);
      });
    },
    // 点击行获取行数据
    rowClick(row) {
      this.info = row;
      this.$refs.table.toggleRowSelection(row);
    },
    // 切换行的类 - hover跟被选中行样式变化
    rowPreDetailClass({ row }) {
      if (this.currentHoverId == row.rcptNo) {
        return "is-hover";
      } else if (this.info.rcptNo == row.rcptNo) {
        return "is-active";
      }
    },
    // 鼠标移入表格某个单号
    handleMouseEnter(row, column, cell, event) {
      this.currentHoverId = row.rcptNo;
    },
    // 鼠标移出表格某个单号
    handleMouseLeave() {
      this.currentHoverId = -1;
    },
    // 记录每一行设置的合并数
    getSpanArr(data) {
      var pos = null;
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          pos = 0;
        } else {
          // 根据单号进行合单
          if (
            data[i].rcptNo &&
            data[i - 1].rcptNo &&
            data[i].rcptNo === data[i - 1].rcptNo
          ) {
            this.spanArr[pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            pos = i;
          }
        }
      }
    },
    // 表格的单元格样式
    set_cell_style({ row, column, rowIndex, columnIndex }) {
      if (
        (column.type == "selection" || column.label == "单号") &&
        this.spanArr[rowIndex] != 1
      ) {
        return "background-color: #fff";
      }
      return "";
    },
    //合并操作
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 根据label选择合并列
      if (column.type == "selection" || column.label == "单号") {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-table__body .el-table__row.is-active td {
  background: #f0f9eb !important;
}
.el-table__body .el-table__row.is-hover td {
  background: #e8f4ff !important;
}
</style>