处理vue element-ui 使用moment 解决表格中的时间格式化方案

下载moment.js 

npm install moment --save
//或者
yarn add moment --save

main.js 引入

// 导入时间插件momentjs
import moment from 'moment'
 
// 定义全局时间格式过滤器
Vue.filter('dateFormat', function (daraStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(daraStr).format(pattern)
})

组件中使用

<!-- 显示2020-08-31 10:10 -->
 <div class="time">{
   
   {nowDate | dateFormat('YYYY-MM-DD HH:mm')}}</div>

 在element-ui表格中处理方式:记得使用<template></template>

/*commissionTime是后台返回的时间数据*/
<el-table-column prop="commissionTime" label="委案时间">
   <template slot-scope="scope">{
   
   {scope.row.commissionTime | dateFormat("YYYY-MM-DD")}}</template>
</el-table-column>

根据组件需要单个组件引入:

<script>
let moment = require("moment") // 引入
export default {
    data() {
        return {
            nowDate:new Date().getTime()// 获取时间戳
        }
    },
    created(){
        // 转换时间格式年月日时分秒
        this.nowDate = moment(this.nowDate).format('YYYY-MM-DD HH:mm')
    }
}
</script>

组件中:

<div class="time">{
   
   {nowDate}}</div>

 

猜你喜欢

转载自blog.csdn.net/SmartJunTao/article/details/108321190