如何在Element UI的el-table中定制合并行的悬停效果？

.el-table__row--merged { /*  替换为你的合并行类名 */
  /* ...其他样式... */
}

.el-table__row--merged:hover {
  background-color: #f5f5f5; /*  修改为你的高亮颜色 */
}

.el-table__cell:last-child.el-table__row--merged:hover { /* 只高亮最后一列 */
  background-color: #f5f5f5;
}

// 假设你的表格数据是tableData，并且每一行都有一个唯一的id
const table = this.$refs.table; // 获取el-table实例

table.$el.addEventListener('mouseover', (event) => {
  if (event.target.classList.contains('el-table__row')) { // 检查是否悬停在行上
    const row = event.target;
    const rowId = row.dataset.rowId; // 获取行ID

    // 找到所有属于同一合并行组的行，并添加高亮样式
    table.$el.querySelectorAll('.el-table__row[data-row-id^="' + rowId.split('-')[0] + '"]').forEach(el => {
      el.classList.add('highlight');
    });
  }
});

table.$el.addEventListener('mouseout', (event) => {
  if (event.target.classList.contains('el-table__row')) {
    const row = event.target;
    const rowId = row.dataset.rowId;
    table.$el.querySelectorAll('.el-table__row[data-row-id^="' + rowId.split('-')[0] + '"]').forEach(el => {
      el.classList.remove('highlight');
    });
  }
});

.highlight {
  background-color: #FFFF00; /*  修改为你的高亮颜色 */
}