vue+elementUI 走马灯多条数据同屏滚动

本文主要是介绍vue+elementUI 走马灯多条数据同屏滚动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图

在这里插入图片描述

主要是使用嵌套循环
后台给的数据是数组对象形式如下：
在这里插入图片描述
//处理成二维数组 [[],[],[]]，以应用于页面循环

首先处理成二维数组的格式

//页面内
<template>
<div class="black_head"><ul flex="main:justify"><li>设备编号</li><li>实时状态</li><li>运行时长</li><li>运行百分</li></ul>
</div>
<div class="black_body"><el-carouseldirection="vertical":autoplay="autoplay":interval="5000"height="6.6rem":loop="true"v-if="chejianList.length > 0">//注意此时chejianList 的数组格式  [[],[],[]]<el-carousel-item v-for="(items, indexs) in chejianList" :key="indexs"><ul v-for="(item, index) in items" :key="index"><li flex :class="[index % 2 == 0 ? 'btTrue' : 'btFalse']"><div><span style="color: #fdfdfd">{{ item.room }}-{{ item.name }}#</span></div><div>停止 手动 复位</div><div class="zier"><span v-if="parseInt(item.run_time / 86400) > 0">{{ parseInt(item.run_time / 86400) }}天</span>{{ item.run_times | noValue }}</div><div class="zier"><span :class="[comp_id == 1 ? (item.runbi < 30 ? 'red' : 'zier') : item.runbi < 60 ? 'red' : 'zier']">{{ item.runbi }}%</span></div></li></ul></el-carousel-item></el-carousel><el-carousel direction="vertical" :autoplay="autoplay" :interval="5000" height="6.6rem" :loop="true" v-else><span class="noData" flex="main:center cross:center">暂无数据</span></el-carousel>
</div>
</template>
<script>
export default {data() {return {chejianList: [],}},methods:{threegetGet_device_run_status_totaltimelength() {let params = {device_id: 0,};Get_device_run_status_totaltimelength(params).then((res) => {const { ReturnCode, Data } = res;if (ReturnCode == 200) {this.chejianYunXing= Data;//处理成二维数组  [[],[],[]]let chejian = Math.ceil(this.chejianYunXing.length / 14);let newCheJian = [];for (let i = 0; i < chejian; i++) {newCheJian[i] = this.chejianYunXing.splice(0, 14);}this.chejianList = newCheJian;}});},}
</script>