react+antd表格,表格中的数值需通过对比判断出大小来显示不同的颜色,最大为红色,最小为绿色,中间值不变色
用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>
}
}