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

原创已于 2024-04-03 10:54:36 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

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

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

粘贴以下代码，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;
}