将后台按月返回的数据进行分页加载

后台返回数据格式

data() {
  return () {
    renderList: []
  }
},
methods： {
  getList() {
    //页面初次加载 每次加载5条数据
    var data = [
        {date: '2020年9月',list: [{parkName:'1某停车场',id:'1'},{parkName:'2某某停车场',id:'2'}]},
        {date: '2020年8月',list: [{parkName:'3某停车场',id:'3' },{parkName:'4某某停车场',id:'4'},{parkName:'5某某停车场',id:'5'}]}
        ]
      this.renderList = data
  }
}

以下是当前需求遇到的问题

请求第二页数据时 还存在当前页面加载月份的数据
例如第二页请求返回数据

var data = [
        {date: '2020年8月',list: [{parkName: '6某停车场',id: '6'},{parkName: '7某某停车场',id: '7'},{parkName: '8某某停车场',id: '8'}]},
        {date: '2020年7月',list: [{parkName: '9某停车场',id: '9'},{parkName: '10某某停车场',id: '10'}]}
      ]

最终实现合并数组对象中的相同项

data() {
  return () {
    renderList: []
  }
},
methods： {
  async getList() {
    let { renderList  } = this,
          testList = []

    //这里是接口请求 主要是将所有请求回的数据合并到一个数组中
    await getParkList().then(ret => {
        testList = [...renderList,...ret.data]
    })
    let obj = {},
        list= [];
    for(var i = 0; i < testList.length; i++){
　　　　var currItem = testList[i];
　　　　if(!obj[currItem.date]){
　　　　　　list.push({
　　　　　　　　list: currItem.list,
　　　　　　　　date: currItem.date
　　　　　　});
　　　　　　obj[currItem.date] = currItem;
　　　　}else{
　　　　　　for(var j = 0; j < list.length; j++){
　　　　　　　　var item = list[j];
　　　　　　　　if(item.date == currItem.date){
　　　　　　　　　　item.list = [...item.list,...currItem.list]
　　　　　　　　　　break;
　　　　　　　　}
　　　　　　}
　　　　}
　　};
  this.renderList = testList 
  console.log(list)
  }
}
　　

另一种实现方式

let obj = {},
    list = test.reduce((obj, item) => {
        let find = obj.find(i => i.date === item.date)
        let _d = {
          ...item
        }
        find ? find.list = [...find.list, ...item.list] : obj.push(_d)
        return obj
      }, [])
console.log(list)

list输出结果.png