ant-design, 实现Table单击行变色

首先定义要引入的scss, 并且在页面引入

定义样式

.clickRowStyl{
  background-color : #00b4ed;
}
.ant-table-tbody>.clickRowStyl:hover>td {
  background-color : #00b4ed;
}

引入样式

import tdSelectStyle from "./transaction-struct.scss"

定义Table

                <Table
                  bordered
                  rowKey="id"
                  columns={tableColumns}
                  pagination={tablePagination}
                  dataSource={tableData}
                  scroll={{ x: 600 }}
                  onRow={(record) => ({
                    onClick: () => this.onTableClick(record),
                  })}
                  rowClassName={this.setRowClassName}
                />

onRow和rowClassName

                  onRow={(record) => ({
                    onClick: () => this.onTableClick(record),
                  })}

这个表示点击的时候执行 onTableClick

  onTableClick = (record) => {
    this.setState({ tableId: record.id });
  };

把点击的本行的 id 存储到 state

  setRowClassName = (record) => {
    const {tableId} = this.state;
    return record.id === tableId ? `${tdSelectStyle.clickRowStyl}` : '';
  };

setRowClassName 标识设置每行的 class , 要求返回是一个 String,
这里表示当本行的id 等于刚刚存储在state的 tableId, 那么就表示这一行是选中的行, 返回刚刚定义的样式, 修改背景色

效果

参考 : https://blog.csdn.net/zm_miner/article/details/83026968