vue全局时间过滤器

最新推荐文章于 2023-08-11 11:22:44 发布

撑起自己半边天

最新推荐文章于 2023-08-11 11:22:44 发布

阅读量204

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43840289/article/details/124548251

版权

vue 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

"这篇博客介绍了如何在Vue应用中创建一个全局时间过滤器`dateFormat`，用于格式化日期和时间显示。在`main.js`文件中定义过滤器，然后在组件中通过管道操作符`|`调用，例如`{{scope.row.add_time|dateFormat}

摘要由CSDN通过智能技术生成

vue全局时间过滤器

main.js

Vue.filter('dateFormat', function (originVal) {
  const dt = new Date(originVal)

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + 1 + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

组件使用：

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