一、格式化事件之前请确保时间戳是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}]