el-table span-method合并行后hover样式异常问题解决方案

本文介绍了一个关于Element UI的el-table组件在行合并后,hover样式出现异常的解决方案。通过为合并行设置相同的myRowIndex字段,并监听鼠标移入/移出事件,动态设置行的背景色,实现了正常显示hover样式的功能。
摘要由CSDN通过智能技术生成

思路:为表格数据行新增字段myRowIndex,合并在一起的行myRowIndex值相同,添加方法监测鼠标所在行的myRowIndex值,动态将所有myRowIndex值为此值的行设置相同背景色。

一、为合并行设置相同的myRowIndex

将合并在一起的行(row)添加相同的myRowIndex,为后续根据myRowIndex动态设置类名做准备。
此步骤可以在合并行的时候设置,由于合并行的业务代码不易理解,所以就不贴代码了。

二、获取当前鼠标所在行的index

  1. el-table有监测鼠标移入/移除单元格的事件,添加这两个事件
    在这里插入图片描述

    <el-table
    	//...... 省略其他代码
        @cell-mouse-enter="handleCellMouseEnter"
        @cell
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值