设置当前行样式

场景描述

运行时需要对表格的当前行进行突出的样式显示

实现思路

通过设置表格组件提供的行样式属性设置

具体实现

方案一、使用组件提供的“当前行类名”的“高亮效果”设置

在表格组件提供的当前行类名属性设置“高亮效果”

运行效果如下：

方案二、使用表格组件提供的当前行类名属性设置自定义属性

定义需要的行样式css

:global(.c-tablebg){
    background-color:#B6D7A8;
}

打开当前行类名编辑器设置class

运行效果如下：

方案三、使用组件提供的“行类名”设置自定义样式

1.定义需要的行样式css

:global(.c-tablebg){
    background-color:#B6D7A8;
}

2.但是由于antd自身定义了鼠标悬浮等样式，为了效果更好，我们把默认的样式重新定义。

//去除鼠标悬浮的背景色
.custom{
    :global(.ant-table-tbody > tr > td ){
            background: rgba(255,255,255,0) !important;
    }
    :global(.ant-table-tbody > tr >td:hover){
            background: rgba(255,255,255,0) !important;   
    } 

}

3.然后在页面组件的样式中设置上custom，该custom样式需要设置在table组件的任一祖先组件上，比如案例使用的页面组件，如下：