使用antd table 操控背景色

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

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

  pagination={dataPagination}

  columns={this.dataTableColumns}

  dataSource={this.dataSource}

  locale={{emptyText:}}

  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;

     }

}

你可能感兴趣的:(使用antd table 操控背景色)