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

antd table 行点击事件以及高亮显示选中行的背景颜色_第1张图片
需求如图点击表格某一行选中,修改选中行的背景颜色

查看antd的官方文档 https://ant.design/components/table-cn/
antd table 行点击事件以及高亮显示选中行的背景颜色_第2张图片

在这里插入图片描述

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

rowClassName: 表格行的类名, 如下图: 我通过this.setRowClassName方法添加类名
onRow: 用于给表格添加事件, 如onClick, onMouseEnter 等内部事件
 }}
  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

你可能感兴趣的:(antd)