再谈Element Plus改变Table选中行背景颜色的简单方法

蓝洛水深 • 2023年4月26日上午9:30 • 网站 • 阅读 1099

此前已经用非常简单的方式进行了样式干预实现全局表格选中行的高亮颜色调整，其实还可以进行非常多的操作实现这一目的，下面再分享一种。

按如下路径找到table选中行背景色的CSS文件。

node modules > element-plus > theme-chalk >  eltable.css >  el-table

1	node modules > element-plus > theme-chalk > eltable.css > el-table

找到这一句：

--el-table-current-row-bg-color:var(--el-color-primary-light-9);

1	--el-table-current-row-bg-color:var(--el-color-primary-light-9);

可以看到，这里定义了选中行高亮颜色为–el-color-primary-light-9

如果要调整，其一是直接在这里定义颜色，其二是使用 element plus 的内置颜色。

同理，找到如下路径：

node modules > element-plus > theme-chalk > base.css

1	node modules > element-plus > theme-chalk > base.css

可以看到–el-color-primary-light-9之前有3/5/7/8几种颜色，数字越靠前颜色越深，这时我们只需要找一个相对深一点或者其他自己想要的颜色，将对应的值修改到eltable.css即可。

以上内容就是本次分享。

原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/11995