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 @   让梓航飞  阅读(4234)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示