关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改,添加fixed后颜色又出现问题

本文介绍如何修改 Element UI 中 table 组件鼠标悬停时的高亮背景颜色,包括解决 fixed 列不生效的问题,提供两种解决方案及 CSS 代码示例。

table 鼠标悬停时高亮背景颜色的修改

.el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrapper tbody tr:hover>td{ background-color: #颜色 } 就可以了

如果添加了fixed 上面设置的鼠标悬浮颜色可能一部分无效了

原因是:
我们先看一下elements的设置前后结构变化对比;主要看 el-table__body-wrapper
设置前
在这里插入图片描述
设置后 (我设置的fixed='left'fixed="right"
在这里插入图片描述
可以看出多出了 绿色框中的内容,再去看看绿色框中的内容就是固定的列;
所以原因很明显了,我们之前只是设置了.el-table__body-wrapper 的浮动颜色

解决方法1:继续添加css

// 如果使用了stripe斑马纹 可能需要加!important
.el-table__fixed tbody tr:hover>td {    //左边固定
        background-color: #颜色;
}
.el-table__fixed-right tbody tr:hover>td {   //右边固定
        background-color: #颜色;
}

解决方法2:经1楼指教 第二种解决方法 更加完美

	// 如果使用了stripe斑马纹 可能需要加!important
	.el-table__body .el-table__row.hover-row td{
	   	background-color: #颜色;
	}
评论 10
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值