Fork me on GitHub

antd table 的 rowClassName 的使用

rowClassName 可以允许我们为 table 的某一行添加样式,它的 record 返回的是一个对象
    <div className={`${styles.editable} myTableClass`}>
      <Table
        components={components}
        rowClassName={(record, index) => {
          return (
            record.name === '立项指导值' ? 'rowBackground' : record.name === '生准采购意见' ? 'addBold' : ''
          )
        } }
        bordered
        dataSource={dataSource}
        columns={mergedColumns}
        showHeader={false}
        pagination={false}
        scroll={{ x: 1300 }}
      />
    </div>
    .rowBackground td {
      background-color: #ebf1fc !important;
    }
    .addBold {
      font-weight: bold;
    }

 或者多个条件判断

<Table 
  columns={columns} 
  dataSource={context.products} 
  rowClassName={(record, index) => {
    if (record.current_price !== record.previous_price) {
      return "green";
    }
    if (record.current_price === 'Timeout') {
      return "red";
    }
    return null;
  }
  onChange={onChange} 
  pagination={{ pageSize: 100 }} 
/>

 

posted @ 2022-07-19 22:02  让梓航飞  阅读(4430)  评论(0)    收藏  举报