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

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

HTML页面

<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代码

getData() {
                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'
                    }
                ]
                let newArr = [];
                this.dataAll.forEach((item, i) => {
                    let index = -1;
                    let isExists = newArr.some((newItem, j) => {
                        if(item.addtime == newItem.addtime) {
                            index = j;
                            return true;
                        }
                    })
                    console.log(!isExists)
                    if(!isExists) {
                        newArr.push({
                            addtime: item.addtime,
                            subList: [item]
                        })
                    } else {
                        newArr[index].subList.push(item);
                    }
                    this.Data = newArr
                    console.log(newArr)
                })
            },

先放上，明天再来修改，加上备注，因为我也没有搞懂意思。。。所以明天我得搞懂这个意思。

成果：

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

猜你喜欢