antd table 将列的数据找出最大值和最小值，然后用颜色区分

Question

antd table 多列数据需要将各自列的最大值标红，最小值标绿。

问题出现的环境背景及自己尝试过哪些方法

尝试1. 自己在column里面设置render函数操作，得到的数据没办法聚合去判断大小，更别说做标志了
尝试2. 在拿到数据之前将需要的标志的数据列排序做标志，但是由于数据源的格式是数组对象，只有列作对比还好，多列就不行了。

有做过相识的功能的大佬提供下思路，感激不尽！！！

Answer 1

/**
 * 从数据源中对比指定字段值
 * @param field 字段名称
 * @param value 当前值
 * return int 1 => 最大, -1 => 最小, => 其它
 */
function diff(field, value) {
    let vals = this.dataSource.map(v => v[field]);
    if (Math.max(vals) === value) return 1;
    if (Math.min(vals) === value) return -1;
    return 0;
}

ps:这代码我是没测试过的

Answer 2

// headerConfig.js

export default function column(that) {
  return (
  [
    {
      title: '名称',
      key: 'name',
      render: (text) => {
        let field = 'name';
        let value = text;
        let vals = that.state.tableList.map(v => v[field]);
        if(Math.min(...vals) ===value) 
        return (<span style={{color: 'green'}}>{text}</span>);
        if(Math.max(...vals) ===value) 
        return (<span style={{color: 'red'}}>{text}</span>); 
      }
    }
    //...其他表头配置
  ]
  )
}

//index.js
import headerConfig form './headerConfig
constructor(props) {
  super(props)
  this.state = {
    headerColumn: headerConfig(this)
  }
}

<Table 
  dataSource = {this.state.tableList}
  columns = {this.state.headerColumn}
>