使用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}/>