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

在Element UI的表格组件中，合并行是常用的展示形式，但默认的悬停效果仅针对单个单元格，无法实现合并行整体的悬停交互，需要开发者手动定制相关逻辑。

el-table合并行的基础实现

el-table提供了span-method属性用于合并行和列，该属性接收一个方法，返回包含rowspan和colspan的数组，用于指定当前单元格需要合并的行数和列数。

基础的合并行实现代码如下：

// 合并行的方法
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 假设第一列需要合并相同内容的行
  if (columnIndex === 0) {
    const currentValue = row.name;
    let rowspan = 1;
    // 统计当前行往下有多少相同内容的行
    for (let i = rowIndex + 1; i < tableData.length; i++) {
      if (tableData[i].name === currentValue) {
        rowspan++;
      } else {
        break;
      }
    }
    // 如果不是合并行的第一行，返回0不渲染
    if (rowIndex > 0 && tableData[rowIndex - 1].name === currentValue) {
      return [0, 0];
    }
    return [rowspan, 1];
  }
  return [1, 1];
};

默认悬停效果的问题

el-table默认的悬停效果是通过tr:hover的CSS选择器实现的，当行被合并后，每个单元格属于不同的tr元素，鼠标悬停时只会高亮当前鼠标所在的单个tr，无法让合并的所有行同时高亮，不符合用户的操作预期。

定制合并行悬停效果的方案

方案一：通过自定义行类名关联合并行

首先给合并的同一组行添加相同的自定义类名，然后通过CSS实现该类名下的所有行在鼠标悬停时同时高亮。

步骤1：在span-method中记录合并行的分组信息，给每个合并组生成唯一标识：

let mergeGroupMap = {}; // 存储合并组信息，key为行索引，value为组id
let groupId = 0;

const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    const currentValue = row.name;
    let rowspan = 1;
    for (let i = rowIndex + 1; i < tableData.length; i++) {
      if (tableData[i].name === currentValue) {
        rowspan++;
      } else {
        break;
      }
    }
    // 如果是合并行的第一行，生成新的组id
    if (!(rowIndex > 0 && tableData[rowIndex - 1].name === currentValue)) {
      groupId++;
      // 给当前组的所有行绑定组id
      for (let j = rowIndex; j < rowIndex + rowspan; j++) {
        mergeGroupMap[j] = groupId;
      }
    }
    if (rowIndex > 0 && tableData[rowIndex - 1].name === currentValue) {
      return [0, 0];
    }
    return [rowspan, 1];
  }
  return [1, 1];
};

步骤2：使用row-class-name属性给每一行添加对应的组类名：

const tableRowClassName = ({ row, rowIndex }) => {
  const groupId = mergeGroupMap[rowIndex];
  return groupId ? `merge-group-${groupId}` : '';
};

步骤3：在CSS中定义悬停样式，当鼠标悬停到某个合并组的行时，该组所有行都高亮：

/* 合并组悬停样式 */
.merge-group-1:hover,
.merge-group-2:hover,
.merge-group-3:hover {
  background-color: #f5f7fa;
}
/* 如果组id不固定，可以用属性选择器，前提是类名格式统一 */
[class^="merge-group-"]:hover {
  background-color: #f5f7fa;
}

方案二：监听鼠标事件动态控制样式

如果需要更灵活的悬停效果，比如只高亮合并组内的部分行，或者添加动画效果，可以通过监听表格的鼠标进入和离开事件实现。

首先在表格上绑定cell-mouse-enter和cell-mouse-leave事件：

<el-table
  :data="tableData"
  :span-method="spanMethod"
  :row-class-name="tableRowClassName"
  @cell-mouse-enter="handleCellMouseEnter"
  @cell-mouse-leave="handleCellMouseLeave"
>
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

然后实现事件处理逻辑，动态给合并组的行添加或移除高亮类名：

// 存储当前悬停的组id
let currentHoverGroupId = null;

const handleCellMouseEnter = (row, column, cell, event) => {
  const rowIndex = tableData.findIndex(item => item === row);
  const groupId = mergeGroupMap[rowIndex];
  if (groupId) {
    currentHoverGroupId = groupId;
    // 给所有同组的行添加高亮类名
    const rows = document.querySelectorAll(`.merge-group-${groupId}`);
    rows.forEach(rowEl => {
      rowEl.classList.add('hover-highlight');
    });
  }
};

const handleCellMouseLeave = (row, column, cell, event) => {
  if (currentHoverGroupId) {
    const rows = document.querySelectorAll(`.merge-group-${currentHoverGroupId}`);
    rows.forEach(rowEl => {
      rowEl.classList.remove('hover-highlight');
    });
    currentHoverGroupId = null;
  }
};

对应的高亮样式：

.hover-highlight {
  background-color: #ecf5ff !important;
}

两种方案的对比

注意事项

• 合并行的逻辑需要和悬停效果的逻辑匹配，确保同一合并组的行标识一致
• 自定义类名的优先级要足够高，避免被el-table的默认样式覆盖，必要时可以使用!important
• 如果表格数据会动态更新，需要在数据更新后重新计算合并组信息，避免悬停效果异常

Element_UIel-table合并行悬停效果修改时间：2026-07-10 18:21:45