
如何在 el-table 中自定义合并行 hover 样式和逻辑?
问题:
- 如何使 hover 在合并行上触发所有行的突出显示?
- 如何仅突出显示合并行右侧?
答案:
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)










