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

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