image.png

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

查看antd的官方文檔 https://ant.design/components/table-cn/

image.png

image.png

會發(fā)現(xiàn)文檔中給出了兩個屬性 rowClassName 和 onRow

rowClassName: 表格行的類名, 如下圖: 我通過this.setRowClassName方法添加類名

onRow: 用于給表格添加事件, 如onClick, onMouseEnter 等內(nèi)部事件

<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