vue项目中格式化时间的三种办法

格式化时间

1.第一种

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

methods:{
    formatterTime(row, column, cellValue, index) {
          return moment(cellValue * 1000).format('YYYY-MM-DD HH:mm:ss')
        }
}

2.第二种

 <el-table-column label="创建时间" prop="create_time">
    <template slot-scope="{ row }">
         {{ row.create_time | timeFilter }}
    </template>
</el-table-column>
 
 //格式化时间（第二种 过滤器）
  filters: {
    timeFilter: function (value) {
      return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
    }
  },

3.第三种

• 在根目录下新建filter/index.js

import moment from 'moment'
export default {
  timeFilter: function (value) {
    return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
  }
}

• 在mian.js中遍历注册过滤器

import filters from './filter'

for (const key in filters) {
  Vue.filter(key, filters[key])
}

• 显示时间的页面中

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