在前端将时间戳转成对应的日期时间格式（vue）

最新推荐文章于 2024-06-14 13:05:32 发布

m0_51933554

最新推荐文章于 2024-06-14 13:05:32 发布

阅读量4.2k

点赞数 2

分类专栏： #vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_51933554/article/details/127809895

版权

#vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.第一步,在main.js中定义一个全局过滤器

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

  //获取年份
  const y = dt.getFullYear();
  //获取月份，月份是从0开始，需要+1，先＋1转换成字符串，调用字符串的padStart方法，保证位数为2，不足补0
  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}`;
})

月份是从0开始，需要+1，先＋1转换成字符串，调用字符串的padStart方法，保证位数为2，不足补0

2，第二步，在原来的渲染时间戳的地方，使用作用域插槽

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