问题描述:
Antd中新建一个表格后,默认只添加了鼠标经过事件,即:鼠标经过表格的每一行时,那一行就会添加一个淡色的背景。但是现在有需求,要给表格添加一个点击事件,就是在点击每一行时,也会添加一个背景效果。
1、在
showHeader={false}
columns={columns}
dataSource={this.state.data}
bordered={true}
onRow={(record) => {
return {
onClick: (event) => {
this.setState({
rowId: record.key,
});
this._tableOnclick(event); //调用表格点击事件
}, // 点击行
onDoubleClick: (event) => {},
onContextMenu: (event) => {},
onMouseEnter: (event) => {}, // 鼠标移入行
onMouseLeave: (event) => {}
};
}}
rowClassName={this.setRowClassName}
/>
2、编写行点击事件和行添加类事件,如下代码://表格添加点击背景色事件
setRowClassName = (record) => {
return record.key === this.state.rowId ? 'clickRowStyl' : '';
}
3、最后在样式文件中编写相应的样式代码:.clickRowStyl{
background-color:lightgray
}
.ant-table-tbody>.clickRowStyl:hover>td{
background-color:lightgray
}
4、最后效果如下图所示:
作者:X北辰北
链接:https://xuqwblog.blog.csdn.net/article/details/90606241
来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。