使用antd table 操控背景色

1.点击行之后当前行变色

这个需求需要用到onRow(设置行属性)和rowClassName(表格行的类名)

<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)=>{

  returnrecord.id===this.state.rowId?'clickRowStyl':''

}

// 被选中的表格行的样式

.clickRowStyl background-color #00b4ed

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

2.取消鼠标移入行之后换色

.ant-table-wrapper {

  .ant-table-row:hover>td  {

       background-color:#fff;

     }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容