收到一个需求,展示一个列表,根据列表中每行的状态选择不同的颜色,比如状态为“失败”就整行显示红色。
看了看文档,发现有个rowClassName属性可以设置。
解决方案
a-table组件中设置属性
:rowClassName="setRowClassName"
然后在methods中设置方法
setRowClassName (record) {
//状态0为失败,1为成功
return record.status === 0 ? 'success' : 'error'
}
在<style>标签中设置样式
.error {
color: red;
}
注意,<style>标签内不能写scoped!我有写scoped的习惯,于是一开始用这方法一直没生效,差点以为antd已经不支持这个属性了。。。去掉就可以了,但还是要注意组件间样式会不会冲突,可以尽量写一些特别的名字。