如何在el-table中自定义合并行的悬停效果？

<el-table :row-class-name="getRowClassName"></el-table>

methods: {
  getRowClassName({ row, rowIndex }) {
    //  根据需要判断是否高亮整行或仅高亮最后一行
    return row.isMerged ? 'merged-row' : ''; // isMerged属性用于标识合并行
  }
}

.el-table .merged-row:hover {
  background-color: #f0f0f0; /*  合并行高亮样式 */
}

.el-table .merged-row:hover td:last-child { /* 仅高亮最后一行样式 */
  background-color: #f0f0f0;
}

<el-table ref="tableRef" @row-mouseenter="handleRowEnter" @row-mouseleave="handleRowLeave"></el-table>

data() {
  return {
    highlightedRows: []
  };
},
methods: {
  handleRowEnter(row) {
    if (row.isMerged) {
      this.highlightedRows = this.getAllMergedRows(row); // 获取所有合并行
    } else {
      this.highlightedRows = [row];
    }
    this.updateRowClasses();
  },
  handleRowLeave() {
    this.highlightedRows = [];
    this.updateRowClasses();
  },
  getAllMergedRows(row) {
    //  根据实际数据结构，获取所有属于同一合并行的行数据
    //  此部分需要根据你的数据结构进行调整
    return [row]; //  示例：仅高亮当前行
  },
  updateRowClasses() {
    this.$refs.tableRef.$el.querySelectorAll('.el-table__row').forEach((rowEl, index) => {
      if (this.highlightedRows.includes(this.tableData[index])) {
        rowEl.classList.add('highlight-all');
      } else {
        rowEl.classList.remove('highlight-all');
      }
    });
  }
}

.el-table .highlight-all {
  background-color: #f0f0f0; /* 全局高亮样式 */
}