因为react理念是反对直接才做DOM的,完全使用数据驱动DOM做出渲染。习惯了锋利的JQuery的我们如何在表格里直接操作某一项呢?
举例:要将小于100分的单元格字体标红?如何操作?
直接贴代码,如下:
const columns = [
{
title: '指标',
dataIndex: 'kpi_name',
key: 'kpi_name'
}, {
title: '预期',
dataIndex: 'kpi_target',
key: 'kpi_target',
}, {
title: '实际',
dataIndex: 'kpi_finish',
key: 'kpi_finish',
}, {
title: '评分',
dataIndex: 'kpi_score',
key: 'kpi_score',
render: (text, record) => {
return (
text < 100?
(
<span style={{color:'red'}}>{text}</span>
) : <span>{text}</span>
);
}
}];
那么在评分这一列,一旦出现低于100分的数据,该数字的字体颜色就会变红。
举例2:要是操作这一列的表头怎么办?
简单粗暴的直接写,如下:
{
title: <div style={{color:'red'}}>评分</div>,
dataIndex: 'kpi_score',
key: 'kpi_score',
}
举例3:更改组件默认title怎么操作?
依然简单粗暴的直接写,如下:
<Card title={
<div>GS重点工作任务
<span style={{fontSize:'14px',marginLeft:'1em',fontWeight:'normal'}}>
截至时间:{gsTime}</span>
</div>
}
bordered={false}>
<NestedTable/>
</Card>
举例4:添加多个className怎么搞?
字符串模板,如下:
className={`${style.GSTable} ${style.oo}`}/>
方法小结:
直接在数据里写方法做渲染,让数据去驱动DOM做出改变。
react路漫漫,趟过所有坑才能到达彼岸
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。