vue 将一个数组对象拆分多个处理

前端使用element el-carousel走马灯组件，获取后台数据后分屏滚动展示出来
后台返回前端数据，获取到的是全部数数据，后台数据格式如下：

todoData: [
        {
          list: [
            { name: '迪丽热巴', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '迪丽热巴', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '迪丽热巴', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '迪丽热巴', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '迪丽热巴', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '1' },
            { name: '刘亦菲', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '1' },
            { name: '刘亦菲', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '刘亦菲', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '刘亦菲', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '刘亦菲', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '刘亦菲', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' },
            { name: '刘亦菲', department: '测试部门', dateTime: '2022-04-19 17:30', remark: '从昆明到大理', typeText: '0' }
          ]
        }
      ],

数据都在 list 同一个数组下，只能显示一屏，不能分屏显示

前端需要拆分如下格式才能正常分屏展示

todoData: [
        {
           list: [ {}]， // 第一屏数据
           list: [ {}]   // 第二屏数据
        }
      ],

代码如下：

view层

<el-carousel height="80vh" direction="vertical" :interval="interval" :autoplay="true">
            <el-carousel-item v-for="(item,index) in dataList" :key="index">
              <el-row>
                <el-col :span="6" v-for="(i,j) in item.list" :key="j">
                  <el-card class="box" :body-style="{ padding: '0px' }">
                    <div class="img_src">
                      <img v-if="index == 0" class="image" src="https://img1.baidu.com/it/u=3096843667,855288139&fm=253&fmt=auto&app=138&f=JPEG?w=629&h=500" />
                      <img v-else class="image" src="https://img1.baidu.com/it/u=2748099519,2725604264&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
                    </div>
                    <div style="padding: 2vh; margin-top: 0.5vh;">
                      <div>姓名：{{i.name}}</div>
                      <div>部门：{{i.department}}</div>
                      <div class="bottom clearfix">
                        <time class="time">返回时间：{{ i.dateTime }}</time>
                        <div class="time">备注：{{ i.remark }}</div>
                      </div>
                    </div>
                    <div :class="i.typeText==0 ? 'typeText' : 'typeText1'">
                      <h6 class="text">{{i.typeText==0 ? '请假' : '出差'}}</h6>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>

data 层

// 拆分后回显数据
dataList: [],
// 后台数据
todoData: []

js 层：

created() {
    //  Math.floor(this.todoData[0].list.length / 5)  向下取整（用总数据长度 / 每页显示条数）得到分屏（分页）总数
    this.getList(Math.floor(this.todoData[0].list.length / 5))
  },
 methods: {
    // 将一个数组对象拆分多个处理
    getList(e) {
      let page = {
       // 每页显示多少条数据
        pageSize: 5
      }
      // 页面要渲染的数据
      let list = [] 
      let arr = []
      // for 循环 拆分原来数据
      for (var i = 1; i <= e; i++) {
       // 截取出来分屏（分页）5条数据
        list = this.todoData[0].list.slice((i - 1) * page.pageSize, page.pageSize + (i - 1) * page.pageSize)
        // push 到arr 
        arr.push({
          list: list
        })
      }
      this.dataList = arr
      console.log('arr', arr)
    }
  },

打印成功返回：