antd Table 如何根据某一行的数据控制行tr的样式

vue初学者

于 2018-06-14 21:01:19 发布

阅读量2w

点赞数 1

本文介绍了一种表格组件的配置方法，包括列定义、数据源绑定、滚动条设置、分页配置等，并展示了如何通过rowClassName属性为特定行设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Table columns={configColumns} rowClassName={(record, index) => index % 2  === 0 ? styles.classname : ''} dataSource={data}/>

<Table dataSource={this.state.rankDta}
       scroll={{ y: '200px' }}
       style={{marginLeft: '10px'}}
       pagination={{ pageSize: 12 }}
       columns={columns}
       rowClassName={this.setClassName}
       rowKey={this.state.rankDta.restId}
/>

setClassName = (record, index) => {
  return ( index  === 0 ? styles.red : '')
}