vue 数组按日期分组显示数据

做页面之前我有搜索了别人做的页面，看了微信支付账单的记录，我想我也可以通过按不同的时间去显示不同数据，查看了几个链接，最属意的链接放上https://www.cnblogs.com/fozero/p/11254572.html。

　　因为这种数据一般是从后台拿来的，所以前端就不需要去处理，但是如果后台传进来的不是以时间分割，而是直接是好几十组的数组对象，比如：

this.dataAll = [{
                        nickname: 'wwe',
                        banci1: '232',
                        jibeng: '23123213',
                        name: 'fsfsklf',
                        banci2: '23123',
                        Ua: 'q232',
                        addtime: '2020-02-27'
                    },
                    {
                        nickname: 'wwe',
                        banci1: '232',
                        jibeng: '23123213',
                        name: 'fsfsklf',
                        banci2: '23123',
                        Ua: 'q232',
                        addtime: '2020-02-27'
                    },
                    {
                        nickname: 'wwe',
                        banci1: '232',
                        jibeng: '23123213',
                        name: 'fsfsklf',
                        banci2: '23123',
                        Ua: 'q232',
                        addtime: '2020-03-24'
                    },
                    {
                        nickname: 'wwe',
                        banci1: '232',
                        jibeng: '23123213',
                        name: 'fsfsklf',
                        banci2: '23123',
                        Ua: 'q232',
                        addtime: '2020-03-27'
                    },
                    {
                        nickname: 'wwe',
                        banci1: '232',
                        jibeng: '23123213',
                        name: 'fsfsklf',
                        banci2: '23123',
                        Ua: 'q232',
                        addtime: '2020-04-27'
                    },
                    {
                        nickname: '232',
                        banci1: '3dsd',
                        jibeng: 'dswe',
                        name: 'gdg',
                        banci2: 'daewee',
                        Ua: 'fsf',
                        addtime: '2020-04-27'
                    }
                ]

　　但我们可以自己重新改变下数组的形式：就像这样：

 

 

 

HTML页面

　　这里用了两个v-for是因为有两层循环，大的那层是包裹整个内容包括时间在内，小的那层是通过不同的时间展示不同的数组 但小的那层是属于大的那层的，所以v-for的时候的数组名称记得用大的todo去调用todo.subList。

<div class="content-time" v-for="todo in Data">
            <div class="time">
                <span style="color: #FFFFFF;">{{todo.addtime}}</span>
            </div>
            <div class="mui-card" :key="item.id" v-for="item in todo.subList">
                <div class="mui-card-content ">
                    <div class="left">
                        <p>交班人：{{item.nickname}}</p>
                        <p>班次1：{{item.banci1}}</p>
                        <p>运行机泵：{{item.jibeng}}</p>
                        <p>时间：{{item.addtime}}</p>
                    </div>
                    <div class="right">
                        <p>接班人：{{item.name}}</p>
                        <p>班次2：{{item.banci2}}</p>
                        <p>电压A相：{{item.Ua}}V</p>
                    </div>
                </div>
            </div>
        </div>

script代码

　　可以自行查找下some()方法。

//定义一个空数组
                let newArr = [];
                //通过forEach循环数组
                this.dataAll.forEach((item, i) => {
                    let index = -1;
                    //然后在跑到这里筛选 根据不同的时间放置不同的数组    some（）用来查找数组中是否存在某个值  如果存在 就return true
                    let isExists = newArr.some((newItem, j) => {
                        if(item.addtime == newItem.addtime) {
                            index = j;
                            return true;
                        }
                    })
                    //代码是先跑这里的if条件判读  
                    if(!isExists) {
                        newArr.push({
                            addtime: item.addtime,
                            subList: [item]
                        })
                    } else {
                        newArr[index].subList.push(item);
                    }
                    this.Data = newArr
                })

 

成果：