vue2.0的Element UI的表格table列时间戳格式化

表格属性

[html] view plain copy

<el-table
:data="tableData"
v-loading.body="loading"
border
@selection-change="selectionChange"
style="width: 100%">
<el-table-column
prop="createTime"
label="创建时间"
:formatter="dateFormat"
width="150">
</el-table-column>
<el-table-column
prop="updateTime"
label="更新时间"
width="150">
</el-table-column>
</el-table>

script

[javascript] view plain copy

new Vue({
el: '#tableView',
data: {
//列表数据
tableData: [{
"createTime":1491559642000,
"updateTime":1491559642000
}],
},
methods:{
//时间格式化
dateFormat:function(row, column) {
var date = row[column.property];
if (date == undefined) {
return "";
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
}
}
});

简单来说，vue组件传入的方法函数应该使用v-bind属性绑定

时间格式化使用moent.js

后台时间格式为 /Date(1518060569817)/ 函数

ChangeDateFormat(row, column) {

var jsondate = row[column.property];

jsondate = jsondate.replace("/Date(", "").replace(")/", "");

if (jsondate.indexOf("+") > 0) {

jsondate = jsondate.substring(0, jsondate.indexOf("+"));

} else if (jsondate.indexOf("-") > 0) {

jsondate = jsondate.substring(0, jsondate.indexOf("-"));

}

var date = new Date(parseInt(jsondate, 10));

var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;

var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();

var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();

var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minutes + ":" + second;

vue2.0的Element UI的表格table列时间戳格式化相关推荐

Element UI的表格table列的宽度自适应设置
不要设置 width="110px" <el-table-column prop="login_id" align="center" ...
vue2.0基于element ui 上月本月下月
<div style="margin-bottom:15px ;float:right;"><el-button-group><el-button p ...
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页前言最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
element UI 修改表格边框颜色
element UI 修改表格边框颜色由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

vue2.0的Element UI的表格table列时间戳格式化

vue2.0的Element UI的表格table列时间戳格式化相关推荐

最新文章

热门文章