Element Plus的el-carousel走马灯平铺多张图片
效果
<template><div class="system-banner"><el-carousel height="320px" indicator-position="outside" :autoplay="false"><el-carousel-item v-for="(item, index) in govList" :key="index"><ul class="carouse-main"><li v-for="(list, idx) in item" :key="idx"><div class="carouse-con"><i></i><span>{{ list.name }}</span></div></li></ul></el-carousel-item></el-carousel></div>
</template><script setup>
import { onMounted, ref } from "vue";let arr = []
for (let i = 0; i < 31; i++) {arr.push({name: 'XXXXXXXX',})
}
const govList = ref([])
onMounted(() => {for (let i = 0; i < arr.length / 15; i++) {govList.value[i] = []govList.value[i].push(...arr.slice(i * 15, (i * 15) + 15))}console.log(govList.value)
})
</script><style lang="scss" scoped>.carouse-main {display: flex;flex-wrap: wrap;li {width: 20%;}.carouse-con {display: flex;align-items: center;height: 84px;margin: 7px;background-color: #F1F8FF;i {width: 47px;height: 47px;margin: 0 12px;background-color: #333;}span {flex: 1;font-size: 14px;font-weight: 400;color: #333333;}}
}
</style>
关键是对数组按照要展示数据的进行分组，本例中每一张中展示15个，于是就用按15进行分组