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

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

这两天学习了vue2.0的Element UI的表格table列时间戳格式化，所以，今天添加一点小笔记。

表格属性

:data="tableData"

v-loading.body="loading"

border

@selection-change="selectionChange"

style="width: 100%">

prop="createTime"

HXzkOBc label="创建时间"

:formatter="dateFormat"

width="150">

HXzkOBc

prop="updateTime"

label="更新时间"

width="150">

</el-table>

script

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

:data="tableData"

v-loading.body="loading"

border

@selection-change="selectionChange"

style="width: 100%">

prop="createTime"

HXzkOBc label="创建时间"

:formatter="dateFormat"

width="150">

HXzkOBc

prop="createTime"

HXzkOBc label="创建时间"

:formatter="dateFormat"

width="150">

HXzkOBc

prop="updateTime"

label="更新时间"

width="150">

prop="updateTime"

label="更新时间"

width="150">

</el-table>

script

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。