表格日期格式化
将后台返回的时间戳转换成格式化年月日日期,在表格中显示
<el-table-column align="center"
prop="time"
:formatter="dateFormat"
label="时间"
:resizable="false">
</el-table-column>
:formatter属性绑定自定义格式化方法 dateFormat(row, colum, cellValue, index),
dateFormat(row, colum, cellValue, index) {
return UTIL.formatDateTime(cellValue * 1000);
}
UTIL.formatDateTime中是工具类里是时间格式化方法。
//时间戳转换成日期
formatDateTime(inputTime, mode) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return mode == undefined ? y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second : y + '-' + m + '-' + d + ' ' + h + ':' + minute;
}
根据状态码显示不同状态,该方法里是使用的表格组件,不是表格组件的和上述日期格式化方法相同
方法一:在数据渲染时使用循环,根据返回状态码不同进行赋值
if (result.code) return;
for (let i = 0; i < result.data.length; i++) {
result.data[i].shipping = result.data[i].shipping == 1 ? '海运' : result.data[i].shipping == 2 ? '空运' : '';
}
方法二:在<el-table-column>标签中绑定属性 :formatter="item.formatter"
<el-table :data="tableList" style="width: 100%" border :cell-style="cellStyle">
<template v-for="(item,index) in columns">
<el-table-column :prop="item.prop" :key='item.label' :label="item.label" :align="item.align"
:width="item.width" :resizable="false" :formatter="item.formatter"></el-table-column>
</template>
<el-table-column label="操作" align="center">
</el-table-column>
</el-table>
data() {
let format = this;
return
columns: [
{
prop: 'shipping',
width: '100',
label: '运输方式',
align: 'center',
formatter: format.formatShipper
},
],
}
},
在methods中写方法
formatShipper(row, colum, cellValue, index) {
if (cellValue === 1) return '海运';
if (cellValue === 2) return '空运';
},
方法二也可以为当前单元格增改属性。
个人推荐使用方法二
前端小菜鸟,如有不正确的地方,欢迎指出。