去除ant design vue中a-table组件鼠标悬停和选中行的样式
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
在https://blog.csdn.net/qq_57229245/article/details/140385483这篇文章中,需求是将满足条件的表格行变为红色,但是我发现,鼠标悬停到某一行、或者通过rowSelection 选中行时,这一行的红色背景色会被选中行的样式覆盖调掉。
要去掉选中行和悬停hover时的行背景色,可以用一下代码实现:
将悬停时的背景色变为透明色,避免覆盖掉原来的红色背景色。
:deep(table tbody tr:hover>td) {
background-color: transparent !important;
}
:deep(table tbody .ant-table-row-selected>td) {
background-color: transparent !important;
}
如果表格第一行有复选框的话,这时会发现第一行复选框的背景色变为了红色,因此需要单独设置复选框的背景色,和上面的代码类似:
:deep(table tbody tr:hover>.ant-table-selection-column) {
background-color: #fff !important;
}
:deep(table tbody .ant-table-row-selected>.ant-table-selection-column) {
background-color: #fff !important;
}
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)