前言

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！