Vue 实现翻页器 下一页 处理显示多页面要下一页非表格

vue里面因为数据太多要弄多个页面，路由又不行，element ui的分页器用不了

我的环境是electron-vue，和vue通用的可以无视，这里采用了element ui 的走马灯当做容器翻页

首先把你的渲染数据的数组等分，我这里分成了一个数组8条数据
方法如下

let index = 0
      while (index< this.screenList.length) {
        this.newArr.push(this.screenList.slice(index, index += 8))
      }
      console.log('数组', this.newArr)

this.screenList是数据，newArr为等分后的数据

分好了，在dom进行循环渲染

  <el-carousel trigger="click" height="46vw" :autoplay="false" :loop="false" arrow="always">
      <el-carousel-item v-for="(item, idx) in newArr" :key="idx">
         <el-card class="box-card screen-list" 
                :style="{width: screenCaptureWidth+'px', height:screenCaptureHeight+60+'px'}" 
                :body-style="{padding: 0, overflow:'hidden'}" shadow="hover" v-for="item in newArr[idx]" :key="item.sourceId" :label="item.sourceName"
                :data="item.sourceId"
                >
                    <div   @click="onSelectScreenCapture(item.sourceId)">
                      <p :title="item.sourceName" class="screen-show"><canvas :id="['screen_'+item.sourceId]"></canvas></p>
                    <p class="screen-button">
                      <el-button style="width: 100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" type="text"> {{item.sourceName}} </el-button>
                    </p>
                    </div>
                </el-card>
      </el-carousel-item>
    </el-carousel>

效果如下
第一页

第二页，往后数据越多也能进行自动翻页