自定义ant-table背景色、鼠标悬浮行颜色,解决鼠标离开行“一闪而过”白色问题

946 阅读1分钟

解决方案

自定义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; */

}