Antd vue的Table组件每行根据条件选择样式类名

原创
2020/04/15 09:45
阅读数 4.8K

收到一个需求,展示一个列表,根据列表中每行的状态选择不同的颜色,比如状态为“失败”就整行显示红色。

看了看文档,发现有个rowClassName属性可以设置。

解决方案

a-table组件中设置属性

:rowClassName="setRowClassName"

然后在methods中设置方法

setRowClassName (record) {
  //状态0为失败,1为成功
  return record.status === 0 ? 'success' : 'error'
}

在<style>标签中设置样式

.error {
  color: red;
}

注意,<style>标签内不能写scoped!我有写scoped的习惯,于是一开始用这方法一直没生效,差点以为antd已经不支持这个属性了。。。去掉就可以了,但还是要注意组件间样式会不会冲突,可以尽量写一些特别的名字。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部