如何自定义 el-table 合并行悬浮样式和逻辑？
在线 demo 的效果中：
效果 1：鼠标悬停在第一行时，只高亮右侧（或所有行高亮合并行）。效果 2：鼠标悬停在合并行时，触发所有行高亮。
如何实现：
要实现上述效果，可以按照以下步骤修改代码：
修改悬浮样式：
.el-table__row.expanded { background-color: #f5f7fa!important; }
判断是否触发合并行高亮逻辑：
expandchange(row) { const { rowkey } = this.props; // 扩展行时，触发所有子行高亮 if (row.expanded) { this.hoverrowkeyset.add(row[rowkey]); this.expendedmap[row[rowkey]] = row; // 收缩行时，移除子行高亮 } else { const expandedrow = this.expendedmap[row[rowkey]]; const subrows = expandedrow.children || expandedrow._children; subrows.foreach((subrow) => { this.hoverrowkeyset.delete(subrow[rowkey]); this.expendedmap[row[rowkey]] = undefined; }); }}
修改悬浮逻辑：
rowHover(mouseIn, row, el) { const { rowKey } = this.props; // 扩展行后，所有子行都会触发父行悬浮 if (this.expendedMap[row[rowKey]]) { this.hoverRowKeySet.add(this.expendedMap[row[rowKey]][rowKey]); // 非扩展行，直接判断当前行是否悬浮 } else { mouseIn ? this.hoverRowKeySet.add(row[rowKey]) : this.hoverRowKeySet.delete(row[rowKey]); }}
这样修改后，就可以实现效果 1 和 2，高亮逻辑和样式都得到了优化。
以上就是如何自定义 el-table 合并行悬浮样式和逻辑，实现鼠标悬停效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632285.html
微信扫一扫 
支付宝扫一扫 
