vue中轮播图一屏幕显示多张

1.结构

 <el-carousel arrow="always" :autoplay="false" indicator-position="none">
          <el-carousel-item v-for="(item, index) in dataList2" :key="index">
            <div class="imgl">
              <div class="imgdet" v-for="(item1, index1) in item" :key="index1" @click="huigu(item1.id)">
                <img :src="item1.cover" alt="" />
                <p class="text">{{ item1.title }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

2.在不同屏幕显示不同的张数

 var Width = document.body.clientWidth
          console.log(Width)
          if (Width >= 1200) {
            this.dataList2 = this.formatArray(this.dataList1, 4)
          } else if (768 <= Width < 1200) {
            this.dataList2 = this.formatArray(this.dataList1, 2)
          }
          if (Width < 768) {
            console.log(Width)
            this.dataList2 = this.formatArray(this.dataList1, 1)
          }

3.函数

 formatArray(data, num) {
      var dataList2 = []
      for (var i = 0, len = data.length; i < len; i += num) {
        dataList2.push(data.slice(i, i + num))
      }
      return dataList2
    },