vue.js+element-ui配置使用moment.js进行时间格式化完美方案

解决vue.js+element-ui配置使用moment.js 两种常用方法

方法一：通过设置vue过滤器引入moment.js对时间进行格式化

1.安装依赖

npm install moment --save

2. 在文件中main.js引入moment.js并配置全局vue过滤器 fmtdate

 import moment from 'moment'
  Vue.filter('fmtdate', (v) => {
	return moment.unix(v).format('YYYY-MM-DD')
 })

3. 找到自己需要使用的地方，进行使用

如果使用element-ui中的el-table生成表格，el-table-column生成时间这一列

prop=“写你的时间对象名”

创建一个作用域插槽

{{scope.row.你的时间对象名 | fmtdate}} 使用定义的过滤器fmtdate

  <el-table>
       <el-table-column
        prop="create_time"
        label="创建时间">
        <template slot-scope="scope">
          {{scope.row.create_time | fmtdate}}
          </template>  
      </el-table-column>
    </el-table>

如下图:

运行如下：

方法二：使用element-ui中表格自带属性进行使用

1. 安装依赖moment.js

npm install moment --save

2.引入并设置为全局使用

import moment from 'moment'

Vue.prototype.$moment = moment

3.找到需要使用的el-table-column中，按照官网提供的formatter属性 动态绑定 一个方法 setDate

例：

 <el-table :data="userList">
      <el-table-column
        prop="create_time"
         :formatter="setDate"
        label="创建时间">
      </el-table-column> 
    </el-table>

4.在methods中构造setDate这个方法

 methods: {
   setDate(row, column) {
     const newdata = row[column.property]
     if(newdata === undefined) {return ''}
     return this.$moment.unix(newdata).format("YYYY-MM-DD")
   }
  }

运行：同上效果