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里面申明fakeIndexcount

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;

}}

这样就解决啦!

Antd 表格内通过rowClassName实现隔行变色的显示方法(转载)的更多相关文章

  1. devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)

    介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和Opti ...

  2. Excel2010隔行变色的实现方法 [也可套用格式即可]

    这样excel隔行变色的效果,excel会自动隔行填充不同颜色. 公式说明: =MOD(ROW(),2)=0,实现的效果是偶数行自动填充底纹颜色 =MOD(ROW(),2)=1,实现的效果是奇数行自动 ...

  3. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  4. 怎样实现excel隔行隔列变色效果的方法

    大家在使用excel的过程中,一定见过别人编排的excel文档,隔行添加单元格背景颜色,也就是通常所说的隔行变色效果.Excel中隔行变色效果的好处是:当在Excel中浏览一个非常大的工作簿中的数据时 ...

  5. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  6. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  7. css选择器,用来处理隔行变色的表格

    CSS3 :nth-last-child() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.

  8. Javascript操作表格隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

随机推荐

  1. 在HADOOP中使用MRUNIT进行单元测试

    在HADOOP中使用MRUNIT进行单元测试 前提 1. 了解JUnit4.x的使用. 2. 了解Mock的概念在单元测试中的应用. 3. 了解Hadoop中MapReduce的编程模型. 如果您对J ...

  2. mongoDB连接信息及生成对应的collection生成代码

    .net,个人封装MONGODDB的操作. using System; using System.Collections.Generic; using System.Linq; using Syste ...

  3. 整数拆分-dp问题

    Integer Partition In number theory and combinatorics, a partition of a positive integer n, also call ...

  4. drf三大认证

    源码分析 """ 1)APIView的dispath(self, request, *args, **kwargs) 2)dispath方法内 self.initial( ...

  5. 测试一个数字是否等于 NaN

    ES6提供了一个新的 Number.isNaN() 函数,这是一个不同的函数,并且比老的全局 isNaN() 函数更可靠.

  6. 在JavaScript里的“对象字面量”是什么意思?

    字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量.字面量分为字符串字面量(string literal ).数组字面量(array literal)和对象字面量(ob ...

  7. 玩转UITableView

    UITableView这个iOS开发中永远绕不开的UIView,那么就不可避免的要在多个页面多种场景下反复摩擦UITableView,就算是刚跳进火坑不久的iOS Developer也知道实现UITa ...

  8. [PyTorch入门之60分钟入门闪击战]之神经网络

    神经网络 来源于这里. 神经网络可以使用torch.nn包构建. 现在你对autograd已经有了初步的了解,nn依赖于autograd定义模型并区分它们.一个nn.Module包含了层(layers ...

  9. 会编程的 AI + 会修 Bug 的 AI,等于什么 ?

    2017-02-25 Python开发者 (点击上方公众号,可快速关注) 关于人工智能未来的畅想,除了家庭服务机器人,快递无人机,医用机器人等等,Lucas Carlson 认为人工智能在另外一个领域 ...

  10. [Python_scrapy图片爬取下载]

    welcome to myblog Dome地址 爬取某个车站的图片 item.py 中 1.申明item 的fields class PhotoItem(scrapy.Item): # define ...