【菜鸡记录】数组对象根据某个属性分组（按照年月）。

项目需要做每个月的支付数据，归于一张卡片，由于后台返回的是用户支付的每一条数据，还需要前端做二次数据处理。

第一步：根据payTime进行字符串截取，如"2024-02-05 12:21:45",截取2024-02；再作为新属性合并；

let new_arr = this.list.sort(this.$getDateSort('payTime', false));//根据支付时间排序
let new_arrs = new_arr.map((item) => {
		let str = item.payTime.substring(0, 7);
		return Object.assign(item, {
		yearMonth: str
		});
});

2，根据年月转为新的数组对象

                        let obj = {};
						new_arrs.forEach((item) => {
							if (!obj[item.yearMonth]) {
								obj[item.yearMonth] = [];
							}
							obj[item.yearMonth].push(item);
						});
						let datas = [];
						for (var i in obj) {
							datas.push(obj[i]);
						}
						this.itemdata = datas;

分组完成。

第三步：渲染

<scroll-view scroll-y="true" class="scroll-view-height list-content" :throttle="false">
							<view v-for="(item, index) of itemdata" :key="index + item">
								<OderList :itemdatas="item"></OderList>
							</view>
						</scroll-view>

卡片组件内部：

<template>
	<view class="orderList">
		<view class="listbox" >
			<view class="boxTitle">
				<view class="leftText">
					<picker class="picker" mode="date" fields="month" :value="date" @change="bindDateChange">
						<text class="num">{{ itemdatasList[0].yearMonth.substring(5, 7) >= 10 ? itemdatasList[0].yearMonth.substring(5, 7) : itemdatasList[0].yearMonth.substring(6, 7) }}</text>
					</picker>
					<text class="unit">月</text>
					<view class="triangle" @click="changeBox"></view>
				</view>
				<view class="RightText">
					<text>支出 ¥{{ countTotal }}</text>
				</view>
			</view>
			<view class="boxContent" v-if="showBox" v-for="(item, index) in itemdatasList" :key="item.index">
				<view class="boxContentList">
					<!-- 图标 -->
					<!-- <view class="icon-box">
						<view class="icon">
						</view>
					</view> -->
					<!-- 右边内容 -->
					<view class="optionDetail" >
						<view class="leftOption">
							<text class="parkName">{{ item.parkingName }}</text>
							<text class="monney" @click="goDetail(item)">¥{{ item.finalMoney }}</text>
						</view>
						<view class="middle">
							{{ item.plateNumber }}
						</view>
						<view class="bottom">
							<text class="time">{{ item.payTime }}</text>
							<!-- <view class="del" @click="deleteTip(item)">删除订单</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<showTip ref="showtip" :title="tiptitle" :show="show"></showTip>
	</view>
</template>

子组件计算总价：

computed: {
		countTotal() {
			return this.itemdatas.reduce((sum, obj) => (sum += obj.finalMoney), 0);
		}
	},