echart表格中日期格式化
使用echart表格显示数据,但是后台提供的时间为13位时间戳,显示在表格中也是时间戳,将时间戳转化为YYYY-MM-DD HH-MM-SS时间格式如下:参考几种方法:① element-ui 表格数据时间格式化的方法② vue element-ui表格里时间戳转换成时间显示③ vue 下使用element表单时间戳转日期④ vue + element表格 时间戳转换试错过程方法...
使用echart表格显示数据,但是后台提供的时间为13位时间戳,显示在表格中也是时间戳,将时间戳转化为YYYY-MM-DD HH-MM-SS时间格式如下:
参考几种方法:
① element-ui 表格数据时间格式化的方法
② vue element-ui表格里时间戳转换成时间显示
③ vue 下使用element表单时间戳转日期
④ vue + element表格 时间戳转换
试错过程
方法①在vue中使用会报*.replace()*方法不是一个方法,应该是无法将链式结构识别出来,具体的原因我还没有找出来,有时间再看一下。
方法②是管用的,但是转换结果不标准,当数字为个位数时没有补0,与一系列数据放在一起会很不美观。
方法③使用了Moment工具库,我在导入库的时候失败了很多次,导致无法使用moment()方法,如果可以用的话将会非常简单。
方法④没有使用element-ui中表格的formatter方法,而是单独写了一个filter,不过里面的语法是没有问题的。
最终结果
我结合项目特点将方法③和方法④综合起来实现了时间格式化,以下为代码:
<el-table-column
prop="checkTime"
header-align="center"
label="检测时间"
show-overflow-tooltip
width="200"
align="center"
:formatter="dateFormat"
></el-table-column>
注意
这个问题实在是错了还多太多太多遍了
写方法前面一定要加冒号!!!
写方法前面一定要加冒号!!!
写方法前面一定要加冒号!!!
下面的方法写在方法里面:
dateFormat(row, column) {
var date = new Date(row.checkTime);
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var d =
date.getDate() < 10
? "0" + (date.getDate() + " ")
: date.getDate() + " ";
var h =
date.getHours() < 10
? "0" + (date.getHours() + ":")
: date.getHours() + ":";
var m =
date.getMinutes() < 10
? "0" + (date.getMinutes() + ":")
: date.getMinutes() + ":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + d + h + m + s;
}
转换后的表现
2020-2-12 16:49:28
更多推荐
所有评论(0)