在Ant Design
组件库中,Table
是我们经常用到的一个组件。但是与Bootstrap
不同,要为Ant Design
的组件修改样式并不是简单添加一个类名可以解决的。
在官方文档中,我们可以看到table
有rowClassName
这个属性:
Property | Description | Type | Default |
---|---|---|---|
rowClassName | Row's className | Function(record, index):string | - |
利用这个属性,我们可以给奇数行或者偶数行添加相应的class
以达到斑马纹效果。
<Table
columns={columns}
dataSource={dataSource}
rowClassName={record => {
if (record.key % 2 === 1) {
return 'zebra-highlight'
}
}}
/>
这里record
是table
中的每一行数据,相应数据中我们都需要定义key
,而利用key
,我们可以计算获知该行是奇数行或是偶数行,即if (record.key % 2 === 1)
这部分的含义。
下面我给出一个数据例子:
const recentMatches = [{
key: 1,
time: '14:00',
ht: '英格兰',
score: '1 : 1',
at: '苏格兰',
matchId: 123,
}, {
key: 2,
time: '16:00',
ht: '丛林狼',
score: '3 : 1',
at: '森林湖',
matchId:456,
}, {
key: 3,
time: '18:00',
ht: '格林兰',
score: '1 : 5',
at: '纽芬兰',
matchId: 789,
}, ]
可以看到,每一个数据都有相应的key
。
这样,我们在render()
之后,相应的class
就会被添加到对应行中。
接下来,我们只需要给我们的class
定义style
即可:
.zebra-highlight {
background: #ccc;
}
这样一来,我们的斑马纹就出现了!