• elementui使用day.js格式化后端接口里的日期时间戳


    一、格式化事件之前请确保时间戳是13位数,如果不是要先把时间戳 *1000  (相关说明:https://www.cnblogs.com/JeffreyZhu/p/15793294.html)

    二、然后在vue项目里使用 npm 安装day.js组件

    三、在需要格式化时间戳的组件里引用day.js组件(也可以在main.js里全局注册)

    四、使用day.js格式化日期时间

    1,针对vue2,使用过滤器

     filters: {
        filterTime(val) {
          return dayjs(val * 1000).format('YYYY-MM-DD')
        },
      },
    

    模版使用:{{ scope.row.add_time | filterTime }}  (scope.row.add_time是后端接口请求返回的日期事件)

    2,针对vue3,在获取到服务端数据时,在获取数据函数里直接对获取到的数据里的时间做格式化

       // 格式化时间
          for (var key in res.data.goods) {
            res.data.goods[key].create_time = dayjs(
              res.data.goods[key].create_time * 1000
            ).format('YYYY-MM-DD')
          }
    
      //  获取列表数据完整函数
    async getOrderList() {
          this.loading = true
          const { data: res } = await this.$axios.get('/orders', {
            params: this.queryParams,
          })
          if (res.meta.status !== 200) {
            this.$message.error(`获取订单列表数据出错:${res.meta.msg}`)
            this.loading = false
            return
          }
          console.log(res)
          this.loading = false
          // 格式化时间
          for (var key in res.data.goods) {
            res.data.goods[key].create_time = dayjs(
              res.data.goods[key].create_time * 1000
            ).format('YYYY-MM-DD')
          }
          this.orderList = res.data.goods
          this.total = res.data.total
          this.$message.success('已获取订单列表数据')
        },

    res.data.goods是请求后端接口返回的数组,里面包含每个数据对象,对象里面包含 create_time 属性
    res.data.goods[{create_time: 1512535620},{create_time: 151253221},{create_time: 1512535652}]
  • 相关阅读:
    Flink 多流转换算子
    Flink 基本算子map、keyBy、sum、reduce
    Scala 调用方法时加不加小括号
    Hive rank函数开窗
    Hive 窗口函数
    Scala 集合Map的基本操作
    LOJ#2402. 「THUPC 2017」天天爱射击 / Shooting 整体二分+树状数组
    LOJ#106. 二逼平衡树 树套树
    LOJ#2340. 「WC2018」州区划分
    LOJ#2304. 「NOI2017」泳池(70pts) dp
  • 原文地址:https://www.cnblogs.com/JeffreyZhu/p/15818643.html
Copyright © 2020-2023  润新知