需求如圖點選表格某一行選中,修改選中行的背景顏色

檢視antd的官方文件 https://ant.design/components/table-cn/

會發現文件中給出了兩個屬性 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