vue+elementui Carousel 走马灯 一次轮播4张图片_vue轮播图一开始显示多张图

vue

<el-carousel :loop="false" :autoplay="false" height="204px">
    <el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index">
       <img v-for="(imgList,index2) in list" :key="index2" class="top-img" :src="imgList.img" :alt="imgList.title" />
    </el-carousel-item>
</el-carousel>
1
2
3
4
5

后端返回数据

dataList: [
        {
          "title": "111",
          "url": "xxx",
          "img": "xxx"
        },
        {
          "title": "222",
          "url": "xxx",
          "img": "xxx"
        },
        {
          "title": "333",
          "url": "xxx",
          "img": "xxx"
        },
        {
          "title": "444",
          "url": "xxx",
          "img": "xxx"
        },
        {
          "title": "555",
          "url": "xxx",
          "img": "xxx"
        },
        {
          "title": "666",
          "url": "xxx",
          "img": "xxx"
        },
      ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

处理后端返回的数据

	let newDataList = []
    let current = 0
    if(this.dataList && this.dataList.length>0){
      for(let i=0;i<=this.dataList.length-1;i++){
        if(i%4 !== 0 || i === 0 ){
          if(!newDataList[current]){
            newDataList.push([this.dataList[i]])
          }else{
            newDataList[current].push(this.dataList[i])
          }
        }else{
          current++
          newDataList.push([this.dataList[i]])
        }
      }
    }
    this.dataList = [...newDataList]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

css

.el-car-item {
    width: 100%;
    display: flex;
    .top-img{
      width: 284px;
      height: 184px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
1
2
3
4
5
6
7
8
9
10