在大家进行开发的时候，要造一张表格，表格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}/>