How to customize the hover effect of merge rows in el-table?

Detailed explanation of el-table merge hover effect

When the Element UI's el-table component handles merges, the default hover effect may not meet personalized needs. This article will demonstrate with examples how to customize the hover highlighting of merged rows.

Scenarios and goals

Assuming our el-table contains merge rows, we need to implement two custom hover effects:

1. Effect 1: Single row highlighting or merge row highlighting When the mouse hovers over a row of merge rows, only the row or the entire merge row area is highlighted.
2. Effect 2: Global Highlight When the mouse hovers over any row of merge rows, highlight all merge rows.

Implementation plan

We need to combine CSS and JavaScript to achieve custom effects.

1. Effect 1: Single line or merge row highlight

Use row-class-name attribute and combine it with CSS style control.

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

 methods: {
  getRowClassName({ row, rowIndex }) {
    //Judge whether to highlight the entire line or only highlight the last line as needed. Return row.isMerged ? 'merged-row' : ''; // isMerged attribute is used to identify merged lines}
}

 .el-table .merged-row:hover {
  background-color: #f0f0f0; /* Merge line highlighting styles*/
}

.el-table .merged-row:hover td:last-child { /* Only highlight the last line style*/
  background-color: #f0f0f0;
}

2. Effect 2: Highlight the overall situation

You need to use JavaScript to listen for hover events and dynamically add the CSS class name.

<el-table ref="tableRef"></el-table>

 data() {
  return {
    highlightedRows: []
  };
},
methods: {
  handleRowEnter(row) {
    if (row.isMerged) {
      this.highlightedRows = this.getAllMergedRows(row); // Get all merged lines} else {
      this.highlightedRows = [row];
    }
    this.updateRowClasses();
  },
  handleRowLeave() {
    this.highlightedRows = [];
    this.updateRowClasses();
  },
  getAllMergedRows(row) {
    // Obtain all row data belonging to the same merged row according to the actual data structure // This part needs to be adjusted according to your data structure return [row]; // Example: Only highlight the current 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; /* Global highlighting style*/
}

In the above code, the isMerged property is used to identify merged rows, and the getAllMergedRows function needs to be adjusted according to your data structure to correctly obtain all row data belonging to the same merged row. Through these methods, you can flexibly customize the hover effect of el-table merges. Remember to adjust the code according to your actual data structure.

The above is the detailed content of How to customize the hover effect of merge rows in el-table?. For more information, please follow other related articles on the PHP Chinese website!