解决方案
自定义ant-table背景色、鼠标悬浮行颜色,使用::v-deep穿透样式作用域,确保样式能够覆盖到ant-design组件的默认样式,可以解决鼠标悬浮离开悬浮行时,“一闪而过”原高亮背景色的问题:
::v-deep .ant-table {
background: transparent;
color: #ffffff;
}
::v-deep .ant-table-tbody > tr > td {
background: transparent;
}
::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
background-color: #384c67;
}
原因解释
“一闪而过”原高亮背景色的问题是由于ant-table设置了动画效果,通过修改background即可解决。
.ant-table-tbody > tr > td {
1. /* transition: background 0.3s; */
1. 1. /* transition-behavior: normal; */
1. /* transition-duration: 0.3s; */
1. /* transition-timing-function: ease; */
1. /* transition-delay: 0s; */
1. /* transition-property: background; */
}