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


1、安装

npm install vue-moment --save

或者vue项目管理器安装插件moment依赖

2、在main.js中引用

import moment from 'moment'
Vue.prototype.moment = moment

3、在main.js中加入日期格式化的过滤器,其中dateFormat为方法名称

Vue.filter('dateFormat',function(dateStr,pattern='YYYY-MM-DD HH:mm:ss'){
  return moment(dateStr).format(pattern);
})

4、普通使用方法,date为参数名,后面dateFormat为方法名称

<p>{{date | dateFormat}}</p>

但是,在table中需要添加插槽

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

加入格式化写法:

<el-table-column prop="date" label="时间">
    <template slot-scope="scope">{{scope.row.date| dateFormat}}</template>
</el-table-column>
 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM