需求:当“已分配量”<“有效任务”时,字体颜色改为red或者#D9001B
解决:官方文档给了一个render的参数,可以获得当前行的值,当前行数据,行索引
text其实就是当前这一列的值,比如:Q3
record为这一行所有的值构成的对象,例如:{key: "1",name: "John Brown",age: 32,tel: "0571-22098909",phone: 18889898989,address: "New York No. 1 Lake Park"}
index就是索引
因此我们需要获得有效任务,只要使用record['task_count_eff']即可,然后和已分配量的text进行对比,渲染不同颜色的span即可
- {
- // tooltip描述
- title:
- <div>有效任务
- <Tooltip placement='top' title='有效任务量,即剔除了异常或删除状态的任务后,调研项目中有效任务的总量'>
- <InfoCircleOutlined />
- Tooltip>
- div>,
- dataIndex: 'task_count_eff',
- key: 'task_count_eff',
- render: text=>text
-
-
-
-
- },
- {
- title: '已分配量',
- dataIndex: 'task_count_end',
- key: 'task_count_end',
- render: (text,record,index) => text < record['task_count_eff'] ? <span style={{color: 'red'}}>{text}span>:
- <span style={{color: 'black'}}>{[text]}span>
-
- },
利用render
函数的强大性,根据传参可以定位到具体的某一行,某一列,然后就可以自定义渲染内容了
当然,我们也得记得对象属性的调用方法:
1.对象.属性名
2.对象['属性名']
还是那句话,遇事不用慌,首先查文档,哈哈