点击某一行实现选中样式
// 被选中的表格行的样式
:global {
.ant-table-row {
cursor: pointer;
}
.clickRowStyl {
background-color: #f5faff;
> td {
&:last-child {
border-right: 2px solid #4096ff !important;
}
}
}
.ant-table-tbody > .clickRowStyl:hover > td {
// background-color: #f5faff !important;
}
}
<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) => {
return record.id === this.state.rowId ? 'clickRowStyl' : '';
}