修改Element UI 中 table 表格鼠标经过某一行的背景色

cold__ice

已于 2024-04-03 10:54:36 修改

阅读量993

点赞数 4

CC 4.0 BY-SA版权

文章标签： ui vue.js javascript

于 2024-04-03 10:53:02 首次发布

本文链接：https://blog.youkuaiyun.com/cold__ice/article/details/137335579

本文介绍了如何在ElementUI的El-Table组件中，通过CSS实现鼠标悬停时表格行背景颜色的动态改变，包括`.hover-row`和`.current-row`的选择器应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

粘贴以下代码，background-color换成你要的颜色即可

/* 表格行鼠标经过颜色 */
.el-table__body tr.hover-row.current-row>td.el-table__cell,.el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,.el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,.el-table__body tr.hover-row>td.el-table__cell {
   background-color: blue;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
   background-color: blue;
}