elementu 自定义走马灯点击切换数据

效果图：

JS代码：

提示：看你需求是列表显示几个 如果是6个就在for循环哪里改成6就行 样式根据自己需求改就行

// js
data: function () {
    return {
        tableData: [{
            id: '1',
            name: '第一页(1)',
        }, {
            id: '2',
            name: '第一页(2)',
        }, {
            id: '3',
            name: '第一页(3)',
        }, {
            id: '4',
            name: '第二页(4)',
        }, {
            id: '5',
            name: '第二页(5)',
        },
        {
            id: '6',
            name: '第二页(6)',
        }, {
            id: '7',
            name: '第三页(7)',
        }, {
            id: '8',
            name: '第三页(8)',
        }, {
            id: '9',
            name: '第三页(9)',
        },
        {
            id: '10',
            name: '第四页(10)',
        }, {
            id: '11',
            name: '第四页(11)',
        },
        {
            id: '12',
            name: '第四页(最后一页)',
        }],
    }
},
created() {
    var result = [];
    for (var i = 0, len = this.tableData.length; i < len; i += 3) {
        result.push(this.tableData.slice(i, i + 3));
    }
    this.tableData = result;
},
methods: {
     handel(row) {
         if (row == 'next') {
             this.$refs.carousel.next()
         } else {
             this.$refs.carousel.prev()
         }
     }
 } 

HTML代码：

   <div id="warp">
       <i class="el-icon-d-arrow-left" id="left" @click="handel('prev')"></i>
       <i class="el-icon-d-arrow-right" id="right" @click="handel('next')"></i>
       <el-carousel indicator-position="outside" ref="carousel" arrow="always" :autoplay="false">
           <el-carousel-item id="box" v-for="(item, index) in tableData" :key="index">
               <div v-for="(its,ins) in tableData[index]">
                   <div>{{its.name}}</div>
               </div>
           </el-carousel-item>
       </el-carousel>
   </div>

CSS代码：

#warp {
     width: 600px;
     height: 200px;
     border: 1px solid #000;
     margin: 80px auto;
     position: relative;
 }
 #left,
 #right {
     width: 40px;
     height: 40px;
     border: 1px solid #000;
     text-align: center;
     line-height: 40px;
     position: absolute;
     top: 50%;
     margin-top: -20px;
     border-radius: 50px;
 }
 #left,
 #right:hover{
     cursor: pointer;
 }
 #left {
     left: -50px;
 }
 #right {
     right: -50px;
 }
 .el-carousel__container {
     height: 200px;
 }
 #box {
     display: flex;
     justify-content: space-between;
 }
 #box>div {
     width: 190px;
     height: 200px;
     background: #D2DBE5;
     color: #000;
     font-weight: bold;
     text-align: center;
     line-height: 200px;
 }
 .el-carousel__indicators--outside {
     display: none;
     /* 去掉指示器 */
 }
 .el-carousel__arrow{
     display: none;
 }

总结

1. 通过CSS隐藏组件自带的切换

2. 对数据进行了处理 方便实现业务需求

3. 通过 this.$refs 触发组件的切换事件