1. 前言
需求是需要将历史订单按照年月分类展示,并展示汇总值。由于后端返回的是数组的数据,并没有将数据做好统计分类,出于对自己的自信以及不想给别人添麻烦的信息,然后自己写了一下处理的方法,然后放上最后的效果图吧
2. 代码实现
// 按照月份统计每个月的乘客记录
const getList = computed(() => {
// 将数据按照时间倒叙排列
const dataList = historyList.sort((a:any, b:any) => new Date(b.inTransDate.replace(/-/g, '/')) - new Date(a.inTransDate.replace(/-/g, '/')))
// 获得每条数据的年月日
const dateList = dataList.map((item:any) => item.inTransDate)
.map((ele:any) => ele.split(' ')[0])
// 获取去重的按年月分类的数组 new Set 可以实现数组去重
const yearMonthList = [... new Set(dateList.map((item:any)=> item.substring(0, 7)))]
const result:any = [] // 返回的最终结果数组
// 根据年月数组去处理接口的返回数据,按照年月去分类
yearMonthList.forEach(item => {
const obj:any = {
date: item,
children: [],
total: 0
}
dataList.forEach((ele:any) => {
if(ele.inTransDate.indexOf(item) > -1) {
obj.total += Number(ele.orderAmount) // 计算该月份的总金额
obj.children.push(ele)
}
})
// console.log(1111111, obj)
result.push(obj)
})
return result
})
3. 效果图
就这样实现啦 主要是对数组的熟练操作,其中还有一个兼容ios系统的时间展示处理,千万不要踩坑啊 哈哈哈哈