首页 > 其他 > 详细

Vue element el-table-column标签中对日期进行格式化(全局过滤器)

时间:2020-04-17 11:23:53      阅读:753      评论:0      收藏:0      [点我收藏+]

1、安装时间格式化插件

npm install vue-moment --save
2、在main.js中引用

import moment from ‘moment‘

Vue.use(require(‘vue-moment‘));
Vue.prototype.moment = moment
3、在main.js中加入日期格式化的过滤器,其中dateYMDHMSFormat为方法名称

Vue.filter(‘dateYMDHMSFormat‘,function(dateStr,pattern=‘YYYY-MM-DD HH:mm:ss‘){
return moment(dateStr).format(pattern);
})
4、普通使用方法,date为参数名,后面dateYMDHMSFormat为方法名称

<p>{{date | dateYMDHMSFormat}}</p>
但是,在table中需要添加插槽

不加格式化写法:

<el-table-column prop="date" label="时间"></el-table-column>
加入格式化写法:

<el-table-column prop="date" label="时间">
<template slot-scope="scope">{{scope.row.date| dateYMDHMSFormat}}</template>
</el-table-column>
 
————————————————
版权声明:本文为CSDN博主「huangge1199」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/huangge1199/article/details/104630274/

Vue element el-table-column标签中对日期进行格式化(全局过滤器)

原文:https://www.cnblogs.com/wiilianm/p/12718132.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!