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}]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM