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}]
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章