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

2022-01-07  本文已影响0人  春木橙云

不用解释,直接拿去复用就可以了

<Table
  pagination={dataPagination}
  columns={this.dataTableColumns}
  dataSource={this.dataSource}
  locale={{ emptyText: <NoContent/> }}
  onRow={this.onClickRow}  //<=== here
  rowClassName={this.setRowClassName}  //<=== here
  />
  // 选中行
  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
}

the end

上一篇 下一篇

猜你喜欢

热点阅读