vue 商品列表页面自定义格式时间

最新推荐文章于 2024-07-14 22:44:48 发布

Ac 小萌新

最新推荐文章于 2024-07-14 22:44:48 发布

阅读量218

点赞数

分类专栏： Vue相关文章标签： vue

本文链接：https://blog.csdn.net/weixin_45890743/article/details/113802759

版权

Vue相关专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue.js应用中创建一个全局的日期格式化过滤器`dateFormat`，该过滤器将日期时间转换为指定格式。同时展示了在`el-table-column`中使用作用域插槽结合过滤器显示表格列创建时间的方法，提高了代码的复用性和可读性。

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

main.js中自定义全局组件

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

  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').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 label="创建时间" prop="add_time" width="140px">
          <template slot-scope="scope">
            {{scope.row.add_time | dateFormat}}
          </template>
        </el-table-column>