如何在 el-table 中实现合并行 Hover 样式自定义？

如何在 el-table 中自定义合并行 hover 样式和逻辑？

问题：

• 如何使 hover 在合并行上触发所有行的突出显示？
• 如何仅突出显示合并行右侧？

答案：

<el-table
  ref="table"
  :data="tabledata"
  row-key="id"
  @row-hover="handlerowhover"
  ...
/>

handleRowHover(row, column, cell, event) {
  if (row.spanMerge) {
    // 触发所有行的突出显示
    let index = row.index;
    let parentNode = this.$refs.table.bodyWrapper.children[0];
    let parentNodeChildren = parentNode.children;
    for (let i = index; i < index + row.spanMerge; i++) {
      parentNodeChildren[i].classList.add('ivu-table-row--selected');
    }
  } else {
    // 仅突出显示合并行右侧
    if (row.spanMergeRight) {
      let index = row.index;
      let parentNode = this.$refs.table.bodyWrapper.children[0];
      let parentNodeChildren = parentNode.children;
      for (let i = index; i < index + row.spanMergeRight; i++) {
        parentNodeChildren[i].classList.add('ivu-table-row--selected');
      }
    }
  }
}

效果预览：

[效果图](https://segmentfault.com/img/bvdahqi)

以上就是如何在 el-table 中实现合并行 Hover 样式自定义？的详细内容，更多请关注其它相关文章！