使用vue的v-for循环输出map

前言

        首先需要输出如下图所示的界面样子，观察下面输出数据的列表，发现是一个时间，下面是这个时间的数据。

如果在java中那么就是表现为Map<String,List<Object>> 这种样子的数据格式，不过现在后端返回的是一个数组，需要前端自己转变为Map这种格式。

使用的是uni-app的模型输出列表，开发工具是hbuilderX。

代码

首先后端返回数据样式为如下json格式，这里就是以update_time_fmt为Key进行分类。

{
    "result_msg": "操作成功",
    "data": [
        {
            "update_time_fmt": "2022-03-10",
            "update_time": "2022-03-10T06:59:56.000+0000",
            "bind_status": 1,
            "emp_code": "SF10090040",
            "emp_name": "苏非凡",
            "rel_id": 16,
            "emp_badge_mac": "B8:AE:1C:30:04:CA"
        },
        {
            "update_time_fmt": "2022-03-09",
            "update_time": "2022-03-09T06:06:56.000+0000",
            "bind_status": 1,
            "emp_code": "2013120027",
            "emp_name": "赵勇柱",
            "rel_id": 6,
            "emp_badge_mac": "B8:AE:1C:30:04:01"
        },
        {
            "update_time_fmt": "2022-03-08",
            "update_time": "2022-03-08T09:57:17.000+0000",
            "bind_status": 1,
            "emp_code": "1998040027",
            "emp_name": "夏刘斌",
            "rel_id": 2,
            "emp_badge_mac": "B8:AE:1C:30:04:CA"
        }
    ],
    "result_code": "0",
    "recordsTotal": 8
}

vue的js中就是如下处理方式，

定义了接收的数组dataList，然后用handleListToMap把数组转换为mapDataList这个Object。

export default {
	data() {
		return {
			dataList: [],//定义一个数组用来接收后端的数组
			mapDataList:{} //这个是要展示在页面的map样子
		}
	},
	methods: {
			handleListToMap() {
				//此处需要把数据分为 Map<时间，List<列表数据>>
				let map = {};
				this.dataList.forEach(item => {
					let key = item.update_time_fmt;
					if (!map[key]) {
						let list = [];
						list.push(item);
						map[key] = list;
					} else {
						map[key].push(item);
					}
				});
				this.mapDataList = map;
			},
	}
}

         这里其实我一直以为会是一个Map结构，如果在vue定义一个组件，在props中是可以有Map这个选项的。

        但是console.log输出后会发现，这是一个Object，没想到Object也能循环。

在html代码中就是如下进行输出，先输出map中key，然后用第二个循环输出map中value,

<template>
	<view>
		<uni-list>
			<!-- key就是时间,values就是里面的List数据-->
			<uni-list-item v-for="(values,key) in mapDataList" :key="key" direction="column">
				<view slot="body">
					<text>{{key}}</text>

					<!-- 这里是第二个循环，用来循环List里面的数据 -->
					<view v-for="(item,index) in values">
						<text>{{item.emp_name}}</text>
						<text>{{item.emp_code}}</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
	</view>
</template>