开发记录：Vue前端a-table组件更改行颜色背景

你的良心真的真的不会痛吗

于 2022-01-07 10:37:40 发布

阅读量4.6k

点赞数 9

CC 4.0 BY-SA版权

分类专栏：开发问题汇总文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/Stringcui/article/details/122359203

3 篇文章

订阅专栏

本文介绍如何在Ant Design的a-table组件中使用rowClassName属性，通过在methods中定义判断逻辑，根据数据状态为每一行设置不同背景色。具体步骤包括添加动态类名、编写if条件判断和定制CSS样式。最终实现实例中，当status为'3'时，行背景变为绿色(#2dce5d)。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. a-table组件内添加动态class

:rowClassName="tableRowClassName"

在这里插入图片描述
2. 在methods里添加方法，可添加if条件根据行内容显示不同class

 //行内颜色
    tableRowClassName(record, index) {
      if (record.status == '3') {
      return 'blue'
      }
    },

3. 在style块里添加样式

  /deep/.ant-table-tbody .blue{
    background-color: #2dce5d !important;
  }

结果图：
在这里插入图片描述