Vue时间过滤器的使用

最新推荐文章于 2023-04-25 14:23:38 发布

self-abasedAshuai

最新推荐文章于 2023-04-25 14:23:38 发布

阅读量96

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_63524016/article/details/128721462

版权

首先在main.js中定义

// 定义时间过滤器，
Vue.filter('dateFormat', function (originDate, pattern = '') {
  // 根据给定的时间字符串，得到特定的时间
  var dt = new Date(originDate)
  //   yyyy-mm-dd
  var y = dt.getFullYear()
  var m = (dt.getMonth() + 1).toString().padStart(2, '0')
  var d = dt.getDate().toString().padStart(2, '0')
  if (pattern.toLowerCase() === 'yyyy-mm-dd') {
    return `${y}-${m}-${d}`
  } else {
    var hh = dt.getHours().toString().padStart(2, '0')
    var mm = dt.getMinutes().toString().padStart(2, '0')
    var ss = dt.getSeconds().toString().padStart(2, '0')
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  }
})

HTML,通过作用域插槽过滤

<el-table-column label="创建时间" prop="add_time" width="140px">
        <template v-slot="scope">
          {{scope.row.add_time | dateFormat}}
        </template>
      </el-table-column>