ElementUI的走马灯效果应用

  最近做一个大屏显示，需要循环遍历统计列表每行的数据，然后用循环到的当前行id获取其他数据列表，以走马灯的形式显示，全程自动切换。即：（1）统计数据，第一行；-> （2）其他数据A； -> （3）其他数据B； ->（4）其他数据C； ->（1）统计数据，第二行；以此类推。本来用的是EasyUI，发现EasyUI上没有走马灯，然后就想到了用ElementUI的 Carousel组件。
  以下是定义的四个数据列表的走马灯；

        <div>
            <el-carousel ref="carousel" trigger="click" arrow="always" height="800px" indicator-position="outside" 
                :initial-index="carouselIndex" :autoplay="false">
             <el-carousel-item>
                    <div id="TaskDataGird" style="background-color:#1e408a;" class="easyui-datagrid" ></div>
            </el-carousel-item>
            <el-carousel-item>
                    <div id="TaskDataGird1" class="easyui-datagrid">
                </div>
            </el-carousel-item>
                 <el-carousel-item>
                    <div id="TaskDataGird2" class="easyui-datagrid">
                </div>
            </el-carousel-item>  
                 <el-carousel-item>
                    <div id="TaskDataGird3" class="easyui-datagrid">
                </div>
            </el-carousel-item>
          </el-carousel>
        </div>

  定义了两个参数；

            data: {
                carouselIndex: 0,// 滚动的看板索引
                intervalTime: 10, // 滚动间隔时间
            },

  当页面渲染完成后，加一个定时器控制它的每间隔多长时间滚动显示；

            created() {
                this.getRollTime();
            },
            mounted() {
                this.LoadDataGird(); // 加载统计数据
 
                setInterval(this.switchCarousel, this.intervalTime * 1000); // 定时器，默认每10秒切换
            },

  滚动的方法，用this.$refs.carousel.setActiveItem(this.carouselIndex);来设置滚动的索引切换幻灯片。

            methods: {
                // 获取滚动时间
                getRollTime() {
                    $.get("Ajax/Ajax.ashx?OperateType=GetRollTime",
                        function (data) {
                            var obj = JSON.parse(data);
                            if (obj.ResultCode == "True") {
                                this.intervalTime = obj.obj;
                            }
                        }, 'text');
                },
                // 滚动切换
                switchCarousel() {
                    // 切换走马灯
                    this.$refs.carousel.setActiveItem(this.carouselIndex);
                    // 根据走马灯索引加载数据
                    switch (this.carouselIndex) {
                        case 0:
                            $('#TaskDataGird').datagrid("selectRow", statisticsRow);
                            var row = $('#TaskDataGird').datagrid("getSelected");
                            ID = row.ID;
                            // 循环统计数据行
                            statisticsRow++;
                            if (statisticsRow > rowAll - 1) {
                                statisticsRow = 0;
                            }
                            break;
                        case 1:
                            this.LoadDataGird1();
                            break;
                        case 2:
                            this.LoadDataGird2();
                            break;
                        case 3:
                            this.LoadDataGird3();
                            break;
                        default:
                    }
                    this.carouselIndex++;
                    if (this.carouselIndex == 4) {
                        this.carouselIndex = 0;
                    }
                },
            },

  另外为了使走马灯按钮清晰一些，我放大了切换按钮和指示器，加深了一些颜色;

    <style lang="scss" scoped>
        /*指示器*/
        .el-carousel__button {
            width: 60px;
            height: 20px;
            /*background-color: black;*/
        }
 
        .el-carousel__indicators--outside button {
            background-color: black;
            opacity: .24;
        }
        /*切换按钮*/
        .el-carousel__arrow {
            width: 60px;
            height: 60px;
            background-color: rgba(31,45,61,.30)
        }
    </style>

  最后的效果；