转载: https://www.cnblogs.com/wangrong-0823/p/12788544.html?ivk_sa=1024320u
做页面之前我有搜索了别人做的页面,看了微信支付账单的记录,我想我也可以通过按不同的时间去显示不同数据,查看了几个链接,最属意的链接放上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
})
成果: