antd 表格给某一行增加背景色
时间: 2023-12-07 16:19:41 浏览: 116
点击按钮设置表格背景色
4星 · 用户满意度95%
可以通过自定义表格的 `rowClassName` 属性来为某一行增加背景色。具体步骤如下:
1. 在表格组件中设置 `rowClassName` 属性,该属性接收一个函数作为参数。
2. 在该函数中,判断当前行数据是否满足需要增加背景色的条件,如果满足,返回需要增加的类名,否则返回空字符串。
示例代码如下:
```
<Table
dataSource={dataSource}
columns={columns}
rowClassName={(record, index) => {
if (record.xxx === 'xxx') { // 判断需要增加背景色的条件
return 'highlight-row'; // 返回需要增加的类名
}
return '';
}}
/>
```
在上述代码中,`highlight-row` 是自定义的类名,可以在 CSS 文件中定义该类名的样式。
注意:在使用 `rowClassName` 属性时,需要注意对表格的性能影响。如果数据量较大,可以考虑使用 `virtualized` 属性优化表格性能。
阅读全文