使用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}/>
- Android使用Ant打包所遇到问题的解决方法
- 『PHP』UTF8编码页面存入GBK数据时使用iconv遇到无法转码的字符时中断内容丢失及解决方法
- 遇到的错误-----MySQL使用临时表 出现 “ERROR 1137 (HY000): Can't reopen table” 的异常 解决方法
- 遇到的错误-----MySQL使用临时表 出现 “ERROR 1137 (HY000): Can't reopen table” 的异常 解决方法
- 这两天使用jquery-mobile写手机页面遇到的append样式不生效,以及listview内容显示不完解决方法
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- 使用session时候,遇到的一个问题(请求解决方法)
- 使用pbrt 1.03遇到的问题和解决方法
- 使用iScroll时,input等不能输入内容的解决方法
- 解决模板页使用的情况下,在内容页中使用 document.getElementById找不到控件的方法
- 使用sliverlight时遇到的问题及解决方法
- 制作和使用cramfs中遇到的问题解决方法
- ios tableView那些事 (十六) UITableView中Cell重用机制导致内容重复解决方法
- 虚拟IP实验,遇到场景启用使用虚拟IP就报错,不启用可以正常运行的问题,解决方法
- delphi 使用webbrowser取得网页中表格(Table)内容的正确方法
- 在使用thinkphp 遇到的问题 及解决方法
- ArcMap中使用Python遇到中文字段名错误的解决方法
- Android中使用Toast.cancel()方法优化toast内容显示的解决方法
- 使用dmbs_stats.gather_table_stats做分析后执行计划不准的解决方法
- myeclipse 使用中 遇到错误 无法加载到tomcat下 提示如下 时 的 解决方法