y9kHASN
2021-06-10 15:34
采纳率: 100%
浏览 412
已结题

react+antd表格中的文字设置颜色

react+antd表格,表格中的数值需通过对比判断出大小来显示不同的颜色,最大为红色,最小为绿色,中间值不变色

  • 收藏

1条回答 默认 最新

  • 已采纳

    用table的columns的render函数判断,下面是思路和写法你参考一下

    //这个是三目嵌套
    columns=[
     {
      title:"value",
    dataIndex:"value",
     render(text,record,index)=>{ //text是值,record是当前项对象,index是下标
      return  {text=="max"?<span style={{color:"red"}}>{{text}}</span>:text=="min"?<span style={{color:"blue"}}>{{text}}</span>:<span>{{text}}</span>}
      }
    }
    ]
    
    //定义一个函数调用 
    
    columns=[
     {
      title:"value",
    dataIndex:"value",
     render(text,record,index)=>{ //text是值,record是当前项对象,index是下标
         return this.color(text,max,min);
      }
    }
    ]
    
    color=(value,max,min)=>{
      
      if(value=="max"){
        return <span style={{color:"red"}}>{{text}}</span>;
      }else if(value=="min"){
       <span style={{color:"blue"}}>{{text}}</span>
      }else{
        return <span>{{text}}</span>
      }
    }
    打赏 评论

相关推荐 更多相似问题