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

最新推荐文章于 2024-07-23 10:00:38 发布

转载最新推荐文章于 2024-07-23 10:00:38 发布 · 2.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/zeng092210/article/details/98757941

标签

#ui #vue.js #前端

文章讲述了在ElementUI的el-table组件中，如何处理fixed列在鼠标悬停时背景颜色不生效的问题，提供了两种CSS解决方案，包括针对fixed列的单独样式和覆盖斑马纹效果的通用hover-rowtd样式。

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: #颜色;
	}