Antd 表格内通过rowClassName实现隔行变色的显示方法

最新推荐文章于 2025-06-23 18:13:00 发布

weixin_33701617

最新推荐文章于 2025-06-23 18:13:00 发布

阅读量1.8w

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b8fa414e51d450e776280b1

本文介绍如何使用 AntDesign 的 Table 组件实现奇偶行颜色变化以提高可读性。针对未合并单元格的情况，通过 rowClassName API 和 index 判断实现样式分配。对于合并单元格的情况，提出了通过自定义 fakeIndex 和计数器 count 来准确控制颜色变化的方法。

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

ant design中 table组件很方便，在项目中遇到了需要实现奇偶行颜色不同以方便阅读的功能，主要用到了rowClassName这一api，通过判断index的奇偶来实现不同的样式分配。 rowClassName是一个函数，它的第一个参数是record,对应的是这一行的所有数据，第二个参数是index，对应的是table组件自己计数的第几行；

没有合并单元格的简单情况

直接判断index的奇偶作出不同的样式分配；

rowClassName={(record, index) => {
                        let className = 'light-row';
                        if (index % 2 === 1) className = 'dark-row';
                        return className;
                    }}
复制代码

合并单元格后的复杂情况

这里对应github上的一个没有解决的issue；
在合并单元格后，由于被合并的那一行在Table组件自己的计数中仍然作为一行存在，所以按照上一种方法实现的效果会如图所示，特别吃藕；

我们想要的效果是在合并单元格后，第三行和第四行的颜色一样，第五行的颜色不同，如果依靠 rowClassName中自带的 index是不行的，所以这时候需要自己设定一个fakeIndex和一个用来指示此行是否被合并的标志（我设的是一个标志从此行起还有多少合并行的计数count，遇到普通行，fakeIndex加1；如果遇到被合并的行，则fakeIndex不加1，count减1。这里可以这么做的原因是antd的表格在渲染的时候是每渲染一行，就执行一次 rowClassName的函数。
具体实现代码如下：
首先在React Component的constructor里面申明 fakeIndex和 count

    constructor() {
        super();
        this.fakeIndex = 0;
        this.licensesCount = 1;
    }
复制代码

然后在render渲染的<Table/>里面设置rowClassName函数

    rowClassName={record => {
       let className = 'light-row';
       if (record.licenses.length > 1)
            this.licensesCount = record.licenses.length; //用来初始化合并的行数
             if (this.fakeIndex % 2 === 1) {
                className = 'dark-row';
            }
            if (record.id.charAt(0) === 'c') { //判断是否是合并行
                this.licensesCount--;
            }
            if (this.licensesCount === 1) this.fakeIndex++;
                return className;
            }}
复制代码

这样就解决啦！