image.png
需求如图点击表格某一行选中,修改选中行的背景颜色
查看antd的官方文档 https://ant.design/components/table-cn/
image.png
image.png
会发现文档中给出了两个属性 rowClassName 和 onRow
rowClassName: 表格行的类名, 如下图: 我通过this.setRowClassName方法添加类名
onRow: 用于给表格添加事件, 如onClick, onMouseEnter 等内部事件
<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' : '';
}
// 被选中的表格行的样式
.clickRowStyl
background-color #00b4ed
.ant-table-tbody>.clickRowStyl:hover>td
background-color #00b4ed
