Antd 表格内通过rowClassName实现隔行变色的显示方法(转载)
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;
}}
这样就解决啦!
Antd 表格内通过rowClassName实现隔行变色的显示方法(转载)的更多相关文章
- devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)
介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和Opti ...
- Excel2010隔行变色的实现方法 [也可套用格式即可]
这样excel隔行变色的效果,excel会自动隔行填充不同颜色. 公式说明: =MOD(ROW(),2)=0,实现的效果是偶数行自动填充底纹颜色 =MOD(ROW(),2)=1,实现的效果是奇数行自动 ...
- [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...
- 怎样实现excel隔行隔列变色效果的方法
大家在使用excel的过程中,一定见过别人编排的excel文档,隔行添加单元格背景颜色,也就是通常所说的隔行变色效果.Excel中隔行变色效果的好处是:当在Excel中浏览一个非常大的工作簿中的数据时 ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- css选择器,用来处理隔行变色的表格
CSS3 :nth-last-child() 选择器,可以用来处理隔行变色的表格,详情请参考网上资料.
- Javascript操作表格隔行变色
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 表格的一些原生js操作(隔行变色,高亮显示,添加删除,搜索)
看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...
随机推荐
- haproxy笔记之三:配置HAProxy详细介绍
2.1 配置文件格式 HAProxy的配置处理3类来主要参数来源:——最优先处理的命令行参数,——“global”配置段,用于设定全局配置参数:——proxy相关配置段,如“defaults”.“li ...
- 吴裕雄--天生自然 R语言开发学习:回归(续二)
#------------------------------------------------------------# # R in Action (2nd ed): Chapter 8 # # ...
- webgrind安装使用详细说明
webgrind是一个网页版的性能分析工具,它的主要作用就是分析xdebug生成的cachegrind文件,以一种界面友好详尽的方式来展示性能数据.试用了一下感觉还是很不错的,鉴于网上并没有一个系统介 ...
- 吴裕雄--天生自然KITTEN编程:逃脱升天
- zookeeper 实战 - Pymjer 的博客
下载 $ wget http://apache.forsale.plus/zookeeper/zookeeper-3.4.9/zookeeper-3.4.9.tar.gz 配置conf/zoo.cfg ...
- github里的readme.md
在github里如何写readme.md https://www.cnblogs.com/guchunli/p/6371040.html----------------------> READM ...
- PM2.5如何引发心脏病的?
过去的几十年里,科学家们一点一滴地积累起关于空气污染如何威胁人类健康的新认识.他们的注意力大多集中在肺部疾病,包括癌症上面.对空气污染具体危害的认识越来越多,但是对污染的控制和治理却显得举步维艰.面对 ...
- kafka相关问题总结
一直在使用kafka,遇到过很多问题,总结一下 很多人对比kafka和AMQP的时候,都会强调kafka会丢数据,感觉好像只要用kafka就会丢数据一样,从而排斥使用kafka,亦或者在使用的过程中, ...
- ConcurrentHashMap源码探究 (JDK 1.8)
很早就知道在多线程环境中,HashMap不安全,应该使用ConcurrentHashMap等并发安全的容器代替,对于ConcurrentHashMap也有一定的了解,但是由于没有深入到源码层面,很多理 ...
- 达拉草201771010105《面向对象程序设计(java)》第十八周学习总结
达拉草201771010105<面向对象程序设计(java)>第十八周学习总结 实验十八 总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构 ...