antd table 行点击事件以及高亮显示选中行的背景颜色

需求如图点击表格某一行选中,修改选中行的背景颜色

查看antd的官方文档 https://ant.design/components/table-cn/

会发现文档中给出了两个属性 rowClassName 和 onRow

rowClassName: 表格行的类名, 如下图: 我通过this.setRowClassName方法添加类名

onRow: 用于给表格添加事件, 如onClick, onMouseEnter 等内部事件

<Tablepagination={dataPagination}columns={this.dataTableColumns}dataSource={this.dataSource}locale={{ emptyText: <NoContent/> }}onRow={this.onClickRow}rowClassName={this.setRowClassName}/>

// 选中行onClickRow = (record) => {return {onClick: () => {this.setState({rowId: record.id,});},};}setRowClassName = (record) => {return record.id === this.state.rowId ? 'clickRowStyl' : '';}

// 被选中的表格行的样式.clickRowStylbackground-color #00b4ed.ant-table-tbody>.clickRowStyl:hover>tdbackground-color #00b4ed