Vue中全局定义格式化时间的过滤器

最新推荐文章于 2023-12-15 15:25:49 发布

Ciito

最新推荐文章于 2023-12-15 15:25:49 发布

阅读量221

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_45672928/article/details/118443347

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue.js应用中定义一个全局时间过滤器，用于格式化日期和时间显示。通过示例展示了在Vue组件的表格中如何使用该过滤器，将原始时间字符串转化为易读的日期时间格式。这种方法简化了前端时间格式化的处理，并提高了用户体验。

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

找到main.js文件
在文件中定义一个时间过滤器

// 全局定义格式化时间的过滤器
Vue.filter('dateFormat', function(originVal) {
    const dt = new Date(originVal)
        // dt.getMonth() + 1 + ''外面加了括号是为了变成字符串
        // .padStart(2,'0')使用此方法 第一个参数为总长度为2位，第二个是不足多少位，使用 0字符串 来填充
    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}`
})

使用方法
在要使用的vue组件中的表格区域，通过作用于插槽获取时间的字符串

<el-table-column label="创建时间" prop="add_time" width="160px">
                    <template slot-scope="scope">
                        <!-- | 使用此竖线 调用时间过滤器  -->
                        {{scope.row.add_time | dateFormat}}
                    </template>
                </el-table-column>