ElementUI中table合并后，解决鼠标划入只高亮第一行的问题

在之前的工作中遇到一个问题，使用ElementUI中的el-table组件合并行后，鼠标划入合并行后，只有第一行高亮，其它合并行没有颜色，如下图所示

这样的效果看起来比较突兀，为了解决这个问题，变成以下的样子，我对代码进行了相关的操作，以下代码均有注释。

<template>
  <div class="tableBody">
    <el-table
      :data="tableData"
      style="width: 100%"
      :span-method="mergeColumn"
      border
      :row-class-name="tableRowClassName"
      @cell-mouse-leave="cellMouseLeave"
      @cell-mouse-enter="cellMouseEnter"
      height="100%"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mergingRows: [],
      mergingPos: 0,
      sameRowArr: [],
      curRowArr: [],
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "小明",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987123",
          name: "王小虎",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
    };
  },
  created() {
    this.query();
  },
  methods: {
    query() {
      let self = this;
      // 遍历 tableData 中的所有数据行
      for (let i = 0; i < self.tableData.length; i++) {
        // 如果是第一行
        if (i === 0) {
          // 将第一行的合并行数设为 1
          self.mergingRows.push(1);
          self.mergingPos = 0;
        } else {
          // 如果当前行的 ID 与上一行相同
          if (self.tableData[i].id === self.tableData[i - 1].id) {
            // 当前行需要合并，增加合并行数
            self.mergingRows[self.mergingPos] += 1;
            // 新的一行开始时，记录当前的合并行数为 0
            self.mergingRows.push(0);
          } else {
            // 如果当前行的 ID 与上一行不同
            // 记录当前行的合并行数为 1
            self.mergingRows.push(1);
            // 更新合并行数的起始位置
            self.mergingPos = i;
          }
        }
 
        // 调用 color 方法更新 sameRowArr
        self.color();
      }
    },

    color() {
      // 初始化同一行数组
      let sameRowArr = [], sIdx = 0;
      // 遍历 tableData 中的所有数据行
      this.tableData.forEach((item, index) => {
        // 给每一项添加索引属性
        item.index = index;
        // 如果是第一行
        if (index === 0) {
          // 该行的索引加入同一行数组
          sameRowArr.push([index]);
        } else {
          // 如果当前行的 ID 与上一行相同
          if (item.id === this.tableData[index - 1].id) {
            // 将当前行的索引加入同一行数组的当前分组
            sameRowArr[sIdx].push(index);
          } else {
            // 如果 ID 不同，创建新的一组
            sIdx = sIdx + 1;
            sameRowArr.push([index]);
          }
        }
      });
      // 更新组件的 sameRowArr 属性
      this.sameRowArr = sameRowArr;
     
    },
    // 合并行的方法
    mergeColumn({ row, column, rowIndex, columnIndex }) {
      // 如果列索引小于等于 0
      if (columnIndex <= 0) {
        // 获取当前行需要合并的行数
        const _row = this.mergingRows[rowIndex];
        // 如果需要合并的行数大于 0，则设置 colspan 为 1，否则为 0
        const _col = _row > 0 ? 1 : 0;
        // 返回合并行数和列数的设置
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 设置高亮行样式的方法
    tableRowClassName({ row, rowIndex }) {
      // 获取当前的高亮行索引数组
      let temArr = this.curRowArr;
      // 遍历高亮行索引数组
      for (let i = 0; i < temArr.length; i++) {
        // 如果当前行索引在高亮行索引数组中
        if (rowIndex == temArr[i]) {
          // 返回自定义的高亮样式类
          return "row-class";
        }
      }
    },
    // 鼠标移入单元格时触发的方法
    cellMouseEnter(row, column, cell, event) {
      // 遍历 sameRowArr 中的每一组索引
      this.sameRowArr.forEach((arr, i) => {
        // 如果当前行索引在某一组索引中
        if (arr.indexOf(row.index) != -1) {
          // 更新 curRowArr 为当前组的索引
          this.curRowArr = arr;
        }
      });
    },

    // 鼠标移出单元格时触发的方法
    cellMouseLeave(row, column, cell, event) {
      // 清空高亮行的索引数组
      this.curRowArr = [];
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.row-class {
  background: #f5f7fa;
}
</style>