Element Plus的el-carousel走马灯平铺多张图片

k09332024-08-15 0:01

效果

javascript 复制代码

<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进行分组