js 将数组处理成固定对象为一组的形式进行页面展示

使用情景
1、在跑马灯组件的每个跑马灯页面里，只展示3条数据；
2、使用自己写的左右箭头来切换跑马灯，跑马灯第一页时不展示左侧箭头按钮，最后一页时隐藏右侧箭头；

上代码：
html 代码

<el-row>
	<el-col :span="1">
		<div v-if="showLeftArrow" style="background-color: #f9fbfd;height: 65px;"
			@click="arrowClick('left')" class="arrow_icon">
			<i class="el-icon-arrow-left arrow_icon_style"></i>
		</div>
	</el-col>
	<el-col :span="21">
		<el-carousel ref="carouselCard" trigger="click" indicator-position="none" :autoplay="false"
			arrow="never" :loop="false" height="65px" @change="carouselChange">
			<!-- Math.ceil(leftData.length/3) Math.ceil() 1、向上取整; 2、数组总长度除以3，用于计算数组中每三个对象一组可以有组，也就是跑马灯的总页数-->
			<el-carousel-item v-for="(item, i) in Math.ceil(leftData.length/3)" :key="i">
				<el-row class="carousel_box" justify="space-between" :gutter="10">
					<el-col :span="8" v-for="(item, index) in leftData" style="min-width: 125px;">
					<!-- parseInt() 函数可解析一个字符串，并返回一个整数。 判断当前leftData对象的索引是否在当前的跑马灯页面中（i*3 <= 当前leftData对象的索引 < (i+1)*3） -->
						<div v-if="i === parseInt(index/3) && (3*i)<= index <3*(i+1)"
							@click="blockClick(item.num)"
							:class="i === parseInt(index/3) && (3*i)<= index <3*(i+1) ? 'block':'hide'">
							<div class="block_image">
								<el-image style="width: 23px; height: 23px" :src="item.url"></el-image>
							</div>
							<div>
								<div class="block_number">{{item.num}}</div>
								<div class="block_text">{{item.msg}}</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-carousel-item>
		</el-carousel>
	</el-col>
	<el-col :span="1">
		<div v-if="showRightArrow" style="background-color: #f9fbfd;height: 65px;" class="arrow_icon"
			@click="arrowClick('rigth')">
			<i class="el-icon-arrow-right arrow_icon_style"></i>
		</div>
	</el-col>
</el-row>

javascript 代码

<script>
	export default {
		name: "CenterBox",
		data() {
			return {
				showLeftArrow: false,
				showRightArrow: true,
				leftData: [{
						url: require('../../../../assets/1.png'),
						msg: '待审核',
						num: 0
					},
					{
						url: require('../../../../assets/2.png'),
						msg: '待完成任务',
						num: 0
					},
					{
						url: require('../../../../assets/3.png'),
						msg: '待查看通知',
						num: 0
					},
					{
						url: require('../../../../assets/4.png'),
						msg: '待处理事项',
						num: 0
					}
				]
			};
		},
		methods: {
			carouselChange(index) {
				this.showLeftArrow = index < 1 ? false : true;
				// Math.ceil(this.leftData.length / 3) 根据数组计算跑马灯的页数
				this.showRightArrow = index == (Math.ceil(this.leftData.length / 3) - 1) ? false : true;
			},
			blockClick(valNum) {
				if (valNum == 0) {
					this.$message({
						message: '暂无待办事项...',
						type: 'warning'
					});
				}
			},
			arrowClick(val) {
				if (val == 'left') {
					this.$refs.carouselCard.prev();
				} else {
					this.$refs.carouselCard.next();
				}
			}
		},
	};
</script>