最近在做电商前台页面，需要实现的功能是：两组数据同屏竖向滚动轮播：

很早之前，我是有用过js或者jq写轮播图的，但是现在有了vue+elementUi之后，则想当然的想用elementUi中的走马灯组件。

elementUi官网中提供的都是一屏一个元素的滚动，此时要实现的效果是一屏两个元素的滚动

html部分代码

<el-carousel direction="vertical" v-if="carouselArr.length">
    <el-carousel-item v-for="(items, indexs) in carouselArr" :key="indexs">
        <div v-for="(item,index) in items" :key="index">恭喜，<span><span><span class="textCls" style="width:48px;">{{item.Item1}}</span> {{item.Item2}}</span> 用户申请的 <span class="textCls">{{item.Item3}}</span> 的 <span class="textCls">{{item.Item4}}</span> 样品 <span> 已发货</span></span></div>
    </el-carousel-item>
</el-carousel>

1. 竖向滚动：direction=‘vertical’可以设置轮播方向为竖向
2. 由于要实现的是两项内容同屏滚动，则需要给el-carouse组件中添加两个el-carouse-item即可。
3. 在渲染数据之前，需要将数据数组改为二维数组，每个数组中的子元素都是两个数据组成的数组。

类似于这样的格式：[[数据1,数据2],[数据3,数据4]]

现在的问题变成了将一个一维数组改为二维数组：

//this.carouseList是一个一维数组，长度/2就是能够生成的二维数组的长度  this.carouseArr是一个二维数组
let num = Math.ceil(this.carouselList.length / 2);
for (var i = 0; i < num; i++) {
    this.carouselArr[i] = this.carouselList.splice(0, 2);
}

最终实现功能！！！