Ant Table 背景行加颜色

最新推荐文章于 2024-05-16 08:37:40 发布

m0_59324006

最新推荐文章于 2024-05-16 08:37:40 发布

阅读量1.3k

点赞数

分类专栏： SJF-Ant 文章标签： css html html5

本文链接：https://blog.csdn.net/m0_59324006/article/details/120510250

版权

SJF-Ant 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS定义特定背景色，并结合Vue.js的`:rowClassName`属性，根据条件动态给表格行添加背景色。通过在`methods`中定义`addRowColor`方法，实现了当行数据包含特定字符串或满足特定位置时，为行添加预设的`cell-class`样式。

摘要由CSDN通过智能技术生成

1. 加上背景色css

.cell-class {
        background-color: #F9D182;
    }

2. 在<a-table> 加属性 :rowClassName="addRowColor"

<a-table
        rowKey="index"
        :columns="columns"
        :dataSource="dataSourceReal"
        :pagination="false"
        bordered
        size="middle"
        :scroll="{ x: 3500, y: 'calc(100vh - 300px)' }"
        :loading="loading"
         :rowClassName="addRowColor" 
      />

3. methods 添加方法，可根据实际条件判断是否添加

 methods: {
    // 匹配行加底色
    addRowColor(record, index) {
                // 单元格背景色添加过滤条件，如果以TTL结尾的行，设置背景色
                if(record.projectNumber.indexOf(' TTL') != -1){
                    // 如果是最后的汇总则无颜色
                    return ''
                }
                if (index%8 == 4 || index%8 == 5 || index%8 == 6 || index%8 == 7) {
                    return 'cell-class'
                }
                return ''
   },

}

4.效果如下：