Vue数组数据按照日期分组显示
文章描述：
支付账单的记录是按照每一天进行分开显示的，那么在Vue里面如何将数组里面的数组按照日期分组显示。
<div class="content-time" v-for="todo in Data">
<div class="time" style="border-top: 1px solid #ddd;">
<span style="">{{todo.time}}</span>
</div>
<div class="mui-card" :key="item.id" v-for="item in todo.subList">
<div class="mui-card-content ">
<div>{{item.title}}</div>
<div>{{item.createdAt}}</div>
</div>
</div>
</div>export default{
name:"Home",
data(){
return{
dataAll:[
{id:1,title:'1',createdAt:'2022-11-16 12:38:46'},
{id:2,title:'2',createdAt:'2022-11-16 09:18:50'},
{id:3,title:'3',createdAt:'2022-11-16 09:02:13'},
{id:4,title:'4',createdAt:'2022-11-16 08:34:39'},
{id:5,title:'5',createdAt:'2022-11-08 08:16:22'},
{id:6,title:'6',createdAt:'2022-11-06 05:16:22'},
{id:7,title:'7',createdAt:'2022-11-06 07:16:22'},
{id:8,title:'8',createdAt:'2022-11-02 04:16:22'},
],
Data:[]
}
},
created() {
//console.log(this.dataAll)
var dataAll = this.dataAll
dataAll.forEach((item,index)=>{
item.time = item.createdAt.slice(0,10);
})
console.log(dataAll)
//return false;
//定义一个空数组
let newArr = [];
//通过forEach循环数组
this.dataAll.forEach((item, i) => {
let index = -1;
//然后在跑到这里筛选 根据不同的时间放置不同的数组 some（）用来查找数组中是否存在某个值 如果存在 就return true
let isExists = newArr.some((newItem, j) => {
if(item.time == newItem.time) {
index = j;
return true;
}
})
//代码是先跑这里的if条件判读
if(!isExists) {
newArr.push({
time: item.time,
subList: [item]
})
} else {
newArr[index].subList.push(item);
}
this.Data = newArr
})
},
}
发布时间：2022/11/18
发表评论