el-table合并行悬停效果自定义详解

Element UI的el-table组件在处理合并行时，默认的悬停效果可能无法满足个性化需求。本文将通过示例演示如何自定义合并行的悬停高亮效果。

场景与目标

假设我们的el-table包含合并行，我们需要实现两种自定义悬停效果：

1. 效果一：单行高亮或合并行高亮 鼠标悬停在合并行某一行时，仅高亮该行或高亮整个合并行区域。
2. 效果二：全局高亮 鼠标悬停在合并行任意一行时，高亮所有合并行。

实现方案

我们需要结合CSS和JavaScript来实现自定义效果。

1. 效果一：单行或合并行高亮

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

利用row-class-name属性，结合CSS样式控制。

<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;
}

2. 效果二：全局高亮

需要使用JavaScript监听悬停事件，动态添加CSS类名。

<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; /* 全局高亮样式 */
}

以上代码中，isMerged属性用于标识合并行，getAllMergedRows函数需要根据你的数据结构进行调整，以正确获取所有属于同一合并行的行数据。 通过这些方法，你可以灵活地自定义el-table合并行的悬停效果。 记住根据你的实际数据结构调整代码。