How to customize the hover effect of merged rows in el-table of Element UI?

Element UI el-table merge hover effect customization

This article discusses how to customize the hover effect of merging in the Element UI el-table component. Users want to implement two different hover behaviors:

1. Single-line highlighting (right or whole row): When the mouse hovers over any row of the merged row, only the right part of the merged row is highlighted, or all rows of the merged row are highlighted.

2. Full row group highlight: When the mouse hovers over any row of the merged row, highlight all rows of the merged row.

Implementation plan

The above effects can be achieved by combining CSS styles and JavaScript logic. The following provides an implementation method, which requires the adjustment of the CSS selector and JavaScript code according to specific needs.

Method 1: Single line highlighting (example: highlighting on the right)

This approach requires adding a hover style for the merge row in CSS. Since the specific implementation depends on your HTML structure and merged CSS class names, here is an example:

 .el-table__row--merged { /* Replace with your merged row class name*/
  /* ...Other styles... */
}

.el-table__row--merged:hover {
  background-color: #f5f5f5; /* Modify to your highlight color*/
}

.el-table__cell:last-child.el-table__row--merged:hover { /* Only highlight the last column*/
  background-color: #f5f5f5;
}

Method 2: Highlight the entire line

This method requires using JavaScript to listen for mouseover events and dynamically modify the style of merged row groups. You need to find the common identifier of the merged row groups (e.g., the same row-key or custom attribute).

 // Suppose your table data is tableData and each row has a unique id
const table = this.$refs.table; // Get the el-table instance table.$el.addEventListener('mouseover', (event) => {
  if (event.target.classList.contains('el-table__row')) { // Check whether it is hovering on the row const row = event.target;
    const rowId = row.dataset.rowId; // Get the row ID

    // Find all rows belonging to the same merged row group and add the highlight style 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');
    });
  }
});

Then add highlight class in your CSS:

 .highlight {
  background-color: #FFFF00; /* Modify to your highlight color*/
}

Note: The above code is only an example, you need to adjust it according to your actual code structure and data. data-row-id is a hypothetical property that you need to replace with the property or method you actually use to identify the merged row group. rowId.split('-')[0] Assume that your rowId uses - merge parallel group ID and in-line ID.

By adjusting the CSS selector and JavaScript event listener, you can flexibly control the hover effect of el-table merge to meet different design needs. Remember to modify it according to your actual HTML structure and data.

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