一、格式化事件之前請確保時間戳是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}]