美文网首页
antd table点击行事件显示高亮,显示选中行的背景颜色

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

作者: 春木橙云 | 来源:发表于2022-01-07 15:50 被阅读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

相关文章

网友评论

      本文标题:antd table点击行事件显示高亮,显示选中行的背景颜色

      本文链接:https://www.haomeiwen.com/subject/cdbjcrtx.html