elementui中el-carousel 根据数组长度轮播

已于 2023-09-13 16:15:44 修改
阅读量489 收藏 1
点赞数
文章标签： elementui javascript ecmascript
于 2023-08-25 09:51:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37759901/article/details/132488788
版权

方法一：（开箱即用）
https://blog.csdn.net/qq_47657875/article/details/130718558可参考

<el-carousel indicator-position="outside" height="550px" interval='3000'>
						<el-carousel-item v-for="item in Math.ceil(state.tableData.length / 24)" :key="item">
							<!-- <h3>{{ item }}</h3> -->
							<div v-for="(item,index) in state.tableData.slice((item - 1) * 24,item * 24)" @click="toDetail(item)">
								<div class="device_info device1" >
									<div class="greenCenter"><span>{{item.name}}</span></div>
									<div class="greenCenter"><span>{{item.deviceSN}}</span></div>
									<div class='line'></div>
									<div>当日产量：<span class="color1">{{item.planQuantity}}PCS</span></div>
									<div>OEE：<span class="greenOEE"><el-progress :percentage="item.completeRate"
												color="#3b9e00"></el-progress></span></div>
									<div>持续时间：<span class="color1">{{item.completeRate}}分钟</span></div>
								</div>
							</div>
						</el-carousel-item>
					</el-carousel>

方法二：
在这里插入图片描述

在这里插入图片描述

<div class="loading">
					<el-carousel indicator-position="outside" height="550px" interval='3000' @change="choosepage">
						<el-carousel-item v-for="page in state.pages" :key="page">
							<!-- <h3>{{ page }}</h3> -->
							<div v-for="(item,index) in state.tableData2" @click="toDetail(item)">
								<div class="device_info device1" v-if="item.deviceRunStatus==1">
									<div class="greenCenter"><span>{{item.name}}</span></div>
									<div class="greenCenter"><span>{{item.deviceSN}}</span></div>
									<div class='line'></div>
									<div>当日产量：<span class="color1">{{item.planQuantity}}PCS</span></div>
									<div>OEE：<span class="greenOEE"><el-progress :percentage="item.completeRate"
												color="#3b9e00"></el-progress></span></div>
									<div>持续时间：<span class="color1">{{item.completeRate}}分钟</span></div>
								</div>
								<div class="device_info device2" v-if="item.deviceRunStatus==2">
									<div class="greenCenter"><span>{{item.name}}</span></div>
									<div class="greenCenter"><span>{{item.deviceSN}}</span></div>
									<div class='line'></div>
									<div class="statusName greenCenter color2">故障中</div>
									<div>故障时间：<span class="color2">{{item.completeRate}}分钟</span></div>
								</div>
								<div class="device_info device3" v-if="item.deviceRunStatus==3">
									<div class="greenCenter"><span>{{item.name}}</span></div>
									<div class="greenCenter"><span>{{item.deviceSN}}</span></div>
									<div class='line'></div>
									<div class="statusName greenCenter color3">离线中</div>
									<div>离线时间：<span class="color3">{{item.completeRate}}分钟</span></div>
								</div>
								<div class="device_info device4" v-if="item.deviceRunStatus==4">
									<div class="greenCenter"><span>{{item.name}}</span></div>
									<div class="greenCenter"><span>{{item.deviceSN}}</span></div>
									<div class='line'></div>
									<div class="statusName greenCenter color4">待机中</div>
									<div>持续时间：<span class="color4">{{item.completeRate}}分钟</span></div>
								</div>
							</div>
						</el-carousel-item>
					</el-carousel>

				</div>
ts:
const state = reactive({
		tableData2: [],
		page: 1,
		pages: 1,
		tableData: [{
			"id": "f1e545fe-c1e0-4bc9-bf85-6d386c9798da",
			"lineNo": "SYX003",
			"name": "1号丝印线",
			"deviceSN": "SM-XA-01-P8-MA-0657",
			"deviceRunStatus": 1,
			"planQuantity": 140000,
			"completeRate": 62,
		},.................等等]
onMounted(() => {
       state.pages = Math.ceil(state.tableData.length / 24);//计算轮播页数，向上取整
		choosepage(0)//初始化渲染第一页轮播
	});
	const choosepage = (val : any) => {
		console.log(val + 1, 77799)
		let page = val;//当前页索引
		let arr = [];
		let num = 24 // 填写需要分割成几个一组的数量
		if (state.tableData.length) {
			for (let i = 0; i < state.tableData.length; i += num) {
				arr.push(state.tableData.slice(i, i + num));
			}
		}
		state.tableData2 = arr[page];
		console.log(arr, 677799);
		return arr

	}

第二种复杂循环翻页：产品下面又根据线体类型翻页，第一行是一个线体，第二行是第二个线体，一条线信息没展示完就翻页。缺点，页面丑死，不知道哪个鬼才这样设计，拖出去打一顿
在这里插入图片描述

在这里插入图片描述

<template>
	<div class='allBox'>
		<div class="biggest">
			<dv-decoration-11 class="bigTitle">
				<dv-decoration3 style="width:250px;height:30px;" />
				<div style="margin: 0 20px;">
					设备状态监控
					<!-- {{autoHeight}} -->
								
				</div>
				<dv-decoration3 style="width:250px;height:30px;" />
			</dv-decoration-11>
		</div>
		<div class="title2"><span class="title">单机设备信息 <dv-decoration2 :dur="2"
					style="width:200px;height:5px;" /></span>
			<!-- <dv-decoration8 class="decoration8" :reverse="true" style="width:250px;height:20px;" /> -->
			<span style="margin: 0 20px;">总数</span><span class="color1">{{state.totalStatus.totalCount}}台</span>
			<span class="box1" :class="addClass(1,item.status)"
				v-for="item in state.totalStatus.statusOverview"><span>{{item.name}}</span><span>{{item.count}}台</span></span>
			<el-select class="ft" v-model="state.value" @change="chooseValue" style="width:120px" value-key="id"
				placeholder="请选择">
				<el-option v-for="item in state.lineData" :label="item.value" :value="item.value" :key="item.key">
				</el-option>
			</el-select>
		</div>
		<div class="device_list">
			<div class="loading">
				<el-carousel indicator-position="outside" height="500px" interval='500000'>
					<!-- <el-carousel indicator-position="outside" interval='500000' :height="autoHeight"> -->
					<!-- 暂时是三条线3*8=24，一个页面展示24条数据轮播 -->
					<el-carousel-item v-for="item in Math.ceil(state.pages / 8)" :key="item">
						<div v-for="val in state.deviceData" class="boxItem">
							<div v-for="(item,index) in val.deviceItems.slice((item - 1) * 8,item * 8)" class="smallBox"
								:class="addClass(2,item.status)">
								<div class="perItem">
									<div class="greenCenter"><span>{{val.name}}{{item.deviceName}}</span></div>
									<div class="greenCenter"><span>{{item.deviceSn}}</span></div>
									<div class='line'></div>
									<div v-if="item.status==2">当日产量：<span class="color2">{{item.quantity}}PCS</span>
									</div>
									<div class="oeeper" v-if="item.status==2">OEE：<span class="greenOEE"><el-progress
												:percentage="50" color="#3b9e00"></el-progress></span>
									</div>
									<div v-if="item.status!==2" class="statusName greenCenter"
										:class="addClass(1,item.status)">{{item.statusStr}}</div>
									<div style="display: flex;align-items: center;margin-bottom: 10px">
										 <AlarmClock style="width: 1.5em; height: 1.5em; margin-right: 8px" />
										<span :class="addClass(1,item.status)">{{item.durationStr}}</span>
									</div>
								</div>
							</div>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>

	</div>
</template>
<script lang="ts" setup>
	import * as signalR from '@microsoft/signalr'
	import * as echarts from 'echarts';
	import { onMounted, reactive, ref, watch, inject, provide } from 'vue';
	import { Download, Search,AlarmClock } from '@element-plus/icons-vue';
	import { ElMessage } from 'element-plus';
	import { ChartQuery, GetProductCodeSelect } from '../../../api/j03';
	import { formatDate, getCycle } from '../../../utils/time';

	const myRef = ref(null);
	const state = reactive({
		totalStatus: {},
		value: '',
		pages: 1,
		lineData: [],
		deviceData: [],
		deviceSN: '',
	});
	onMounted(() => {
		GetProductCodeSelect2();
		setInterval(() => {
			// console.log('子设备汇总', DeviceInfos.values)
			if (DeviceInfos.values == undefined) {
				return
			}
			return
			state.totalStatus = DeviceInfos.values.statusOverview;
			// state.tableData=DeviceInfos.values.lines;
			// 挑选出每条线体数组长度最长的进行计算轮播的页数pages
			state.deviceData = DeviceInfos.values.lines;
			// console.log(state.deviceData,9999999)
			let data = DeviceInfos.values.lines;
			let arr = []
			for (let i = 0; i < data.length; i++) {
				arr.push(data[i].deviceItems.length)
			}
			// console.log(arr,788)
			const max = Math.max(...arr);
			state.pages = max;//已挑选出线体最大长度，这个长度决定轮播分几页展示
			// console.log(max,state.pages,789); // 输出：最大值
		}, 3000)
		getAutoHeight()
		window.addEventListener('resize', () => {
			this.getAutoHeight()
		})
	});
	const autoHeight = ref(null);
	const getAutoHeight = (() => {
		//上面区域占比70%
		autoHeight.value = innerHeight * 0.7 - 200 + 'px';
		console.log(autoHeight, 77777)

	})
	watch(autoHeight, (newVal, oldVal) => {
		getAutoHeight();
	});
	let DeviceInfos = inject('DeviceInfos')
	// 子传父改变值重新推送
	const emits = defineEmits(['nameSelect']);
	const chooseValue = ((val) => {
		// console.log(val, 7777)
		state.value = val;
		emits('nameSelect', val)
	})
	const addClass = ((num, status) => {
		// 设备运行状态离线=0,1=待机,运行=2,3=空转,故障中=4,
		var cname = '';
		var cdevice = '';
		switch (status) {
			case 0: //离线
				cname = 'color0';
				cdevice = 'device0';
				break;
			case 1: //运行
				cname = 'color1';
				cdevice = 'device1';
				break;
			case 2: //停止
				cname = 'color2';
				cdevice = 'device2';
				break;
			case 3: //停止
				cname = 'color3';
				cdevice = 'device3';
				break;
			case 4: //停止
				cname = 'color4';
				cdevice = 'device4';
				break;
		}
		if (num == 1) {
			return cname;
		} else {
			return cdevice;
		}
		// return cname, cdevice;
	})

	const GetProductCodeSelect2 = (id : string) => {//下拉查询
		GetProductCodeSelect().then((res : any) => {
			if (res.status === 0) {
				// ElMessage({ type: 'success', message: '操作成功' });
				state.lineData = res.data;
				// 如果下拉有值,则默认请求第一条数据
				if (state.lineData != [] || state.lineData.length > 0) {
					chooseValue(state.lineData[0].value)
				}
			}
		});
	};
</script>

<style>
	.boxItem {
		/* display: -webkit-box;和display: flex;两种方法效果一样，使用一个即可/* justify-content: flex-start; 这个方法可用可不用，看项目需求是居中对其，两端对其还是其他对其*/
		/* display: -webkit-box; */
		display: flex;
		width: 100%;
		/* border: 1px solid; */
		font-size: 0.8rem;
		/* 去掉高度就是自动实现同行不等高块状元素按照最高的盒子自适应内容动态来保持高度一致 */
		/* height: 33%; */
	}

	.smallBox {
		/* border: #55ff00 1px solid; */
		width: 11%;
		margin: 1% 0.6%;
		border-radius: 10px;
		overflow: hidden;
		/* 注意:这个宽度和这个间距是需要计算的,刚好等于100%才能完全对整齐 比如31*3=93  1*2*3=6% 93+6=99接近100，页面看着调即可*/
	}

	/* // 滚动条隐藏 */
	/* .smallBox::-webkit-scrollbar {
			display: none!important;
		} */
	/* 以上关键 */
	/* 表头动画样式 */
	.biggest {
		/* margin-bottom: 2rem; */
	}

	.bigTitle {
		height: 80px;
		width: 70%;
		text-align: center;
		margin: 0 auto;
		font-size: 30px;
		/* padding-bottom: 2.55rem; */
	}

	/* 单机设备标题模块 */
	.title2 {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.box1 {
		display: inline-block;
		width: 100px;
		border: 1px solid;
		height: 40px;
		line-height: 40px;
		border-radius: 10px;
		text-align: center;
		margin: 0 10px;
	}

	.ft {
		position: absolute;
		right: 3.5%;
	}

	/*  设备运行状态离线=0,1=待机,运行=2,3=空转,故障中=4, */
	.color0 {
		color: #797979;
	}

	.color1 {
		color: #f6f700;
	}

	.color2 {
		color: #32e751;
	}

	.color3 {
		color: #ffffff;
	}

	.color4 {
		color: #e72225;
	}

	.title {
		font-size: 1.5rem;
		color: #62efe7;
		margin-right: 3rem;
		margin-left: 1%;
	}

	.ft .el-input__wrapper {
		cursor: pointer;
		background-color: #13214d;
		border: 1px solid #64f5f7;
		color: #64f5f7 !important;
		text-align: center;
	}

	.decoration8 {
		width: 250px;
		height: 20px;
		display: inline-block;
		position: absolute;
		left: 16px;
		top: 44px;
	}

	.el-select .el-input__inner {
		cursor: pointer;
		color: #62efe7;
	}

	/* 轮播表样式 */
	.greenCenter {
		text-align: center;
	}

	.device0 {
		box-shadow: inset 0px 0px 10px 3px #797979;
		border: 1px solid #797979;

		.line {
			border: 1px solid #797979;
		}
	}

	.device1 {
		box-shadow: inset 0px 0px 10px 3px #f6f700;
		border: 1px solid #f6f700;


		.line {
			border: 1px solid #f6f700;
		}
	}

	.device2 {
		box-shadow: inset 0px 0px 10px 3px #32e751;
		border: 1px solid #32e751;

		.line {
			border: 1px solid green;
		}
	}

	.device3 {
		box-shadow: inset 0px 0px 10px 3px #ffffff;
		border: 1px solid #ffffff;

		.line {
			border: 1px solid #ffffff;
		}

	}

	.device4 {
		box-shadow: inset 0px 0px 10px 3px #e72225;
		border: 1px solid #e72225;

		.line {
			border: 1px solid #e72225;
		}

	}

	.statusName {
		font-size: 1.5rem;
		margin: 10px 0!important;
	}

	.greenOEE {
		display: inline-block;
		width: 69%;
	}

	.perItem div {
		margin: 5px 5px;
	}
	.oeeper div{
		margin: 0!important;
	}
</style>
<!-- https://blog.flqin.com/415.html可参考 -->

20230913补充：
当出现滚动条影响美观时候，需要隐藏滚动条并且滚动：

<style lang="scss" scoped>
.board-border {
			width: 98%;
			height: 97%;
			// border: 1px solid #0d2451;
			position: relative;
			overflow: scroll;
			margin: 0 auto;
			/* IE 10+ 滚动条隐藏*/
			-ms-overflow-style: none;
			/* Firefox 滚动条隐藏*/
			scrollbar-width: none;
			-ms-overflow-style: none; // 微软
		}

		// overflow: -moz-scrollbars-none;
		// 谷歌滚动条隐藏
		.board-border::-webkit-scrollbar {
			display: none;
		}
		</style>
https://wenmayi.com/post/680.html
微笑么么哒
关注
用Element-UI框架写轮播图，左右箭头点击轮播，下方小锚点对应轮播
大姐的博客
10-26 1148
element框架写轮播图的简易方法，相比js原生数据和别的插件例swiper简单的多
vue + el-carousel + video-player图片和视频轮播（等视频播放完在继续进行轮播）
梁小茹的博客
06-27 4516
关于这个问题，查了很多，很多都是图片轮播 要求：图片和视频一起轮播，等视频播放完在进行轮播 逻辑： 绑定轮播改变事件@change事件，如果是视频的话，让轮播停止，获取他的总时长进行设置，在重置进度条 下次播放重新开始 监听结束事件，让轮播继续，时间重置（注意这里一定要将loop设置为false） 直接上代码把： <el-carousel :autoplay="autoplay" :interval="interval" :initial-i
elementui的轮播图
flying_chick的博客
02-25 5103
需求是需要把左右切换分页的大小于号放在轮播图外面： 涉及到了一些问题： 1.实现思路 2.绝对定位垂直居中 3.需要覆盖一些组件里的样式，直接给设置样式无法覆盖 解决1:实现思路 没有找到插件原生的方法，于是看了一遍文章，制作两个div装着图片，调整到所需位置，再给两个图片添加出发轮播图翻页的方法就可以。 文章地址：ElementUi Carousel 走马灯轮播图，el-carousel左右箭头位置调整_飞歌Fly的博客-CSDN博客_carousel 方向 解决2:绝对定位垂直居中
element ui 中轮播图组件样式修改为三列展示轮播
SugarXiXixi的博客
06-21 1674
接着去修改控制位移的 calcCardTranslate() 函数即可，我这里需要三列轮播，做以下调整，总体上样式还是使用 Element UI 默认样式，只是细节上的调整。虽然 Element UI 中跑马灯组件提供了 type=‘card’ 属性，去设置轮播为卡片类型，但是样式不是我们所期待的，不想要缩放效果，于是便对跑马灯组件源码进行调整。选中样式的带箭头的边框是使用的背景图片，尝试使用css伪类完成箭头，但是会形成竖向滚动条（如下图），过度修改elementui的原生样式，所以选择背景图片方式。
ElementUI 轮播图
shykevin的博客
01-19 2677
一、概述 因项目需求，需要增加轮播图，官方demo效果如下： 但这个不是我们想要的，我们需要的是这样的。 二、代码实现 需要在原有的基础上，修改页面样式才行。 test.vue <template> <div style="width: 700px"> <el-carousel indicator-position="outside"> ...
elementUI 轮播图 ----Carousel 走马灯笔记
最新发布
liyaodong1234的博客
11-03 1982
/定义变量//添加监听 其中parentdom为父级元素id});
vue-split-carousel:vue的轮播组件，同时显示多个轮播项目
04-19
Vue拆分轮播 Vue的轮播组件，同时显示多个轮播项目。 2.x作为最新版本仅支持vue 3，vue 2应该...在使用<split> ，将自定义内容放入split-carousel-item 。 custom content custom content2 安装 npm i
（PC端轮播）el-carousel一个轮播里显示多个内容
leng0920的博客
09-08 2579
（PC端轮播）el-carousel一个轮播里显示多个内容
ElementUi Carousel 走马灯,自定义el-carousel箭头左右切换【轮播图】
weixin_45044349的博客
03-09 3164
效果图 代码1： 可引入网址链接 网址拼接字符串：a1.jpg【随便写到】 <el-carousel trigger="click" height="320px"> <el-carousel-item v-for="item in 4" :key="item"> <img :src="`www.baidu.com/a${item}.jpg`" alt="" class="banner"> </el-caro
Vue ElementUI el-carousel 走马灯 指示灯样式修改
m0_67390788的博客
03-09 2079
Carousel 走马灯 一、原始样式 二、修改后 三、代码 <template> <div> <el-carousel height="250px" > <el-carousel-item v-for="item in 4" :key="item"> <h3 class="small">{{ item }}</h3> </
vue中使用el-carousel组件实现图片轮播效果
热门推荐
07-09 2万+
代码实现： <!--home--> <template> <div> <el-carousel trigger="click" height="250px" :interval="3000" arrow="always" style="width:800px"> <el-carousel-item v-for="item in imgList" :key="item.name"> <img :src
element ui 轮播_UI 05：使用转换和过渡的轮播实现
weixin_26750481的博客
09-12 546
element ui 轮播In this story, I will show you how to implement Carousel using simple HTML and Javascript code, along with some CSS animation ( transform and transition, simple ones! ). When we think abo...
js数组操作实现轮播效果
m0_47587616的博客
09-07 1133
简介 通过把对数组进行重排序后再对图片进行重加载实现点击按钮切换上一个、下一个功能。 实现 具体实现请看代码，关键点有注释 <style type="text/css"> #cardShow img { position: absolute; /* 绝对定位，方便图片布局操作 */ } #cardShow { width: 100%; /* 因为是在移动端的样式 有进行尺寸转化这里先不改了 */ height: 33rem; position: relativ
基于elementui的轮播图
ju__ju的博客
01-07 3197
轮播图轮播图轮播图
利用数组实现无缝轮播
yidengmingmie的博客
03-03 2433
一般的图片轮播切换实现起来并不难，瞬间切换的轮播只需在点击按钮时先让所有的图片隐藏，再让对应索引的图片显示，难点在于平移类型的轮播，在最后一张，第一张图片继续切换时，我们看起来图片就是首尾相连的，但实际上我们并不能把图片真的首尾相连，这只能靠我们自己来实现首尾相连的视觉效果。 1.
element-ui轮播图el-carousel
seimeii的博客
02-09 4261
<template> <div> <div class="w"> <el-carousel height="460px"> <el-carousel-item v-for="(item, index) in list_img" :key="index"> <h3 class="small"> <img :src="item.url" alt /&g
element-ui 轮播图渲染
Sa883349的博客
08-22 152
element-ui 轮播图渲染。
el-table轮播
weixin_66619918的博客
06-29 999
el-table内数据轮播，进入页面开始轮播，鼠标放入停止轮播，离开继续轮播。
vue element ui 根据数组长度制作折叠面板功能
weixin_38644630的博客
01-28 664
vue element ui 根据数组长度制作折叠面板功能 1.先看效果 2.原理 利用vue的计算属性来进行控制数组的长度。 <!-- * @Author: qiaokun * @Date: 2020-12-14 10:16:03 * @LastEditTime: 2021-01-20 11:42:45 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath:
el-carousel-item多张照片轮播
07-10
2. 在需要使用轮播功能的页面中，使用 el-carousel 包裹 el-carousel-item 组件。el-carousel 是一个容器组件，el-carousel-item 则是单个轮播项。 3. 在 el-carousel 组件上设置属性 type="card"，以显示卡片式的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值