PHP Laravel NGINX html css Bootstrap Python Symfony Apache Windows linux jquery Django ASP vanilla Slim vagrant docker Homestead MySQL Redis Git SVN ssh Root vim PhpStorm Pycharm sass less PHP Laravel android html css Vue Angular React NGINX html css Javascript

Ant Design - 如何给Table添加斑马纹(Striped)

原创

原创不易 ~ 转载请注明出处哦

Ant Design组件库中,Table是我们经常用到的一个组件。但是与Bootstrap不同,要为Ant Design的组件修改样式并不是简单添加一个类名可以解决的。

在官方文档中,我们可以看到tablerowClassName这个属性:

PropertyDescriptionTypeDefault
rowClassNameRow's classNameFunction(record, index):string-

利用这个属性,我们可以给奇数行或者偶数行添加相应的class以达到斑马纹效果。

    <Table
      columns={columns}
      dataSource={dataSource}
      rowClassName={record => {
        if (record.key % 2 === 1) {
          return 'zebra-highlight'
        }
      }}
    />

这里recordtable中的每一行数据,相应数据中我们都需要定义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;
}

这样一来,我们的斑马纹就出现了!

zebra-highlight.png


正在加载验证码......
请先完成验证