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;
}}
这样就解决啦!