Antd之自定义Table行背景颜色

需求

测试表格

现在业务上有个需求,需要表格内某项库存数量为0时,该行背景变为红色

实现思路

根据Antd 的官方文档,查看相关的API antd Table

table API

基本思路就是根据官方的API获取当前行的对应数据进行逻辑判断,满足对应条件则添加类名

实现代码

首先定义好需要的类名

.table-color-dust {
    background-color: #F5222D;
}

然后根据条件判断添加类名

 {
     if (record.goods_storage === 0) return 'table-color-dust';
  }}
  rowKey={record => record.id}
  columns={columns}
  dataSource={data}
 />

最后效果


image.png

你可能感兴趣的:(Antd之自定义Table行背景颜色)