antd design Table组件根据不同状态设置表格颜色

今天遇到一个需求,要求表格的数据根据不同的状态显示不同的颜色,效果图如下。
antd design Table组件根据不同状态设置表格颜色_第1张图片
代码

           record.id}
              dataSource={list}
              columns={this.columns}
              bordered={false}
              pagination={{
                current,
                total,
                pageSize,
              }}
              onChange={this.handleTableChange}
              rowClassName={record => (record.state === '1' ? styles.blue : record.state === '2' ? styles.yellow : styles.red)}
            />

引入需要的样式

import styles from './style.less';

style.less文件

.blue {
  background: #1890FF;
}

.yellow {
  background: #fff674;
}

.red {
  background: #ff5845;
}

rowClassName属性可以给表格的行设置样式,可以得到当前行的数据信息。
在这里插入图片描述
antd design官方文档:https://ant.design/components/table-cn/

你可能感兴趣的:(js)