elementui Carousel 走马灯实现点击切换数据

前言

实际开发中常见的用到Carousel 走马灯的场景都是在实现轮播图时，而使用该组件实现文本数据内容的切换好像并不多见。下面介绍一下第二种情况的实现方式。

效果图

列表默认展示两个，左右提供按钮可切换数据。

具体实现

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 :height="dataHeight" indicator-position="outside" ref="carousel" arrow="always" :autoplay="false">
              <el-carousel-item id="box" v-for="item in tableData" :key="item.id">
                <!-- 使用嵌套的 v-for 循环渲染每个属性的值 -->
                <div v-for="(value, key) in item" :key="key">
                      <el-row>
                        <el-col style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">{{value.name}}</el-col>
                        <el-col style="min-height: 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7"></el-col>
                        <el-col style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="8">总发电量:{{value.zfdl}}</el-col>
                      </el-row>
                      <el-row>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">A相电流:{{value.dla}}</el-col>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">A相电压:{{value.dya}}</el-col>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">瞬时功率:{{value.yggl}}</el-col>
                      </el-row>
                      <el-row>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">B相电流:{{value.dlb}}</el-col>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">B相电压:{{value.dyb}}</el-col>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">无功功率:{{value.wggl}}</el-col>
                      </el-row>
                      <el-row>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">C相电流:{{value.dlc}}</el-col>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">C相电压:{{value.dyc}}</el-col>
                        <el-col style="margin:-10px 1px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :span="7">视在功率:{{value.szgl}}</el-col>
                      </el-row>
                </div>
              </el-carousel-item>
          </el-carousel>
   </div>

JS代码：

// js

  props: {
    dataHeight: {
      type: String,
      default: '235px'
    }
  },
  data() {
    return {
        tableData: [{
            id: '1',
            name: '第一页(1)',
            dla: '1',
            dlb: '1',
            dlc: '1',
            dya: '1',
            dyb: '1',
            dyc: '1',
            yggl: '1',
            wggl: '1',
            szgl: '1',
            zfdl: '1',
        }, {
            id: '2',
            name: '第二页(2)',
            dla: '2',
            dlb: '2',
            dlc: '2',
            dya: '2',
            dyb: '2',
            dyc: '2',
            yggl: '2',
            wggl: '2',
            szgl: '2',
            zfdl: '2',
        }, {
            id: '3',
            name: '第一页(3)',
            dla: '3',
            dlb: '3',
            dlc: '3',
            dya: '3',
            dyb: '3',
            dyc: '3',
            yggl: '3',
            wggl: '3',
            szgl: '3',
            zfdl: '3',
        }, {
            id: '4',
            name: '第二页(4)',
            dla: '4',
            dlb: '4',
            dlc: '4',
            dya: '4',
            dyb: '4',
            dyc: '4',
            yggl: '4',
            wggl: '4',
            szgl: '4',
            zfdl: '4',
        }, {
            id: '5',
            name: '第一页(5)',
            dla: '5',
            dlb: '5',
            dlc: '5',
            dya: '5',
            dyb: '5',
            dyc: '5',
            yggl: '5',
            wggl: '5',
            szgl: '5',
            zfdl: '5',
        }], 
    };
  },
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()
         }
     }
 } 

css代码：

#warp {
     width: 600px;
     height: 200px;
     border: 1px solid #000;
     margin: 80px auto;
     position: relative;
 }
 #left,
 #right {
     width: 40px;
     height: 40px;
     border: 1px solid #060F30;
     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: 808px;
     height: 285px;
     background: #051D3F;
     color: rgb(255, 255, 255);
     font-weight: bold;
     text-align: center;
     line-height: 70px;
 }
 .el-carousel__indicators--outside {
     display: none;
     /* 去掉指示器 */
 }
 .el-carousel__arrow{
     display: none;
 }

 ::v-deep .el-carousel__arrow--left{
  left: 5px;
  background-color: #1A5396;
  color: #fff;
}


::v-deep .el-carousel__arrow--right{
  right: 5px;
  background-color: #1A5396;
  color: #fff;
}

参考

emement ui Carousel 走马灯
elementu 自定义走马灯点击切换数据
vue 设置el-carousel的高度