使用ant.design时遇到要格式化Table行的内容的小小解决方法

在你们进行开发的时候，要造一张表格，表格UI设计的格式和后台返回的数据的格式每每不同，这个时候就须要咱们前端人员去发挥聪明才智了。
每每第一想到的解决方法是在接口返回数据的时候直接对原数据进行处理，这样若是只是展现的话能解决问题，可是修改了原数据若是后面须要用到这些数据有可能会出现问题，因此通常不建议这样改。
通常推荐改的是直接在UI上面进行格式化而不修改原始数据。

在使用ant的时候要想修改table里面的内容须要用到render属性，
修改前的图片

修改后的效果为：

达到这样的效果，我这边是这样处理的根据图片咱们能够知道，这里须要格式化的就是时间和字典字段须要格式化因此我这边创造两个方法一个实现时间格式化方法，一个实现字典格式化方法，不一样字段传参解决问题具体代码以下
// 格式化的方法 （根据需求造方法这样就不会造多个类似的方法形成代码臃肿，代码越简洁越好）
import moment from ‘moment’; // 这个moment方法。框架里原本就有引入就好
const formatterTime = (val) => {
return val ? moment(val).format(‘YYYY-MM-DD HH:mm:ss’) : ‘’
}
const formatter = (val, dict) => {
return val ? dict[val] : ‘’
}

// columns 设置
const columns = [{
title: ‘样原本源’,
dataIndex: ‘sampleSource’,
render: (val) => {return formatter(val, sampleSourceDict)}
}, {
title: ‘状态’,
dataIndex: ‘state’,
render: (val) => {return formatter(val, stationStateDict)}
}, {
title: ‘建立帐号’,
dataIndex: ‘creator’,
}, {
title: ‘建立时间’,
dataIndex: ‘createTime’,
render: formatterTime,
}, {
title: ‘修改账号’,
dataIndex: ‘modifier’,
}, {
title: ‘修改时间’,
dataIndex: ‘modifyTime’,
render: formatterTime,
}, {
title: ‘备注’,
dataIndex: ‘remark’,
},];
// 最后将columns 给Table组件
<Table rowKey={record => record.id} columns={columns} dataSource={data.list} bordered size=“middle”
onChange={this.handleChange} pagination={paginationProps}/>