1.点击行之后当前行变色
这个需求需要用到onRow(设置行属性)和rowClassName(表格行的类名)
<Table
pagination={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)=>{
returnrecord.id===this.state.rowId?'clickRowStyl':''
}
// 被选中的表格行的样式
.clickRowStyl background-color #00b4ed
.ant-table-tbody>.clickRowStyl:hover>td background-color #00b4ed
2.取消鼠标移入行之后换色
.ant-table-wrapper {
.ant-table-row:hover>td {
background-color:#fff;
}
}