循环展示数据n条

1. js方式

1.1 第一种方式

     //在data中定义的
   data: {
      indexTwo: 0,
      monthCut: [], //日裁剪完成情况展示
      monthCutData: [], //日裁剪完成情况后台数据
    },
   //在methods中写的方法
      change(num) { // num-->一次轮播几条
        this.monthCut= [];
        let index = 0;
        // this.monthCutData.length   8
        if (this.indexTwo === this.monthCutData.length) {
          this.indexTwo = 0;
        }               
        for (let i = this.indexTwo; i < this.indexTwo + num; i++) {
          if (this.monthCutData[i]) {
            this.monthCut.push(this.monthCutData[i]);
            index = i;
          }
        }
        this.indexTwo = index + 1;
      },
   //在vue中写
    <table cellspacing="0" cellpadding="0">
            <tbody v-for="(item,index) in monthCut">
              <tr>
                <td class="tit">款号</td>
                <td>{{item.StyleNo}}</td>
                <!-- <td class="none"></td> -->
                <td class="tit">面料</td>
                <td>{{item.Fabric}}</td>
              </tr>
              <tr>
                <td class="tit">成衣颜色</td>
                <td>{{item.Color}}</td>
                <!-- <td class="none"></td> -->
                <td class="tit">面料颜色</td>
                <td>{{item.FabricColor}}</td>
              </tr>
              <tr>
                <td class="tit">床数</td>
                <td>{{item.BedNo}}</td>
                <!-- <td class="none"></td> -->
                <td class="tit">件数</td>
                <td>{{item.Num}}</td>
              </tr>
            </tbody>
          </table>  

1.2 第二种方法

// num-->一次轮播几条
const loop55 = (num) => {
  console.log( listVal.listTotal);
  var a = 获取的后台总数据;
  var b = 0;
  var c = setInterval(() => {
    页面展示的数据 = a.slice(b, b += num);
    // console.log(d.length);
    if (页面展示的数据.length < num) {
      b = num - 页面展示的数据.length;
      页面展示的数据 = 页面展示的数据.concat(a.slice(0, b));
    }
  }, 2000)
}