ant-design-vue中table数据在鼠标hover时去掉当前行显示的背景色
ant-design、element-ui等UI框架中,table列表的数据,在鼠标悬停(hover)时,去掉当前行所默认显示的背景颜色.
·
ant-design-vue版本: 2.1.2
分析:
a-table里面的数据在鼠标悬停时,会对当前每一行的td增加一个背景颜色,同时会对当前行的tr增加一个class属性"ant-table-row-hover",如下:
所以只需要在当前类名下设置我们想设置的颜色即可,如下:(样式穿透写法因场景及个人而异)
:deep(.ant-table-tbody .ant-table-row-hover > td) {
background-color: #fff !important;
}
效果如下:当鼠标悬停时,出现了对应的class属性,但显示的颜色为自定义的白色。
其他UI框架也可以按照此思路来改变颜色。
(完)
更多推荐
已为社区贡献5条内容
所有评论(0)