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
                })

 

成果：