el-carousel-item自动重复渲染，使用nanoid让重复的元素包含不同的id

<template>
  <div class="page-container">
    <div class="m-title">轮播图</div>
    <el-carousel height="400px"  :autoplay="true">
      <el-carousel-item v-for="(item, index) in carouselList" :key="index">
        <div class="m-item">
          <cl-line
            v-if="item.line?.id"
            :id="item.line.id + nanoid()"
            :list="item.line.list"
            width="400px"
            height="400px"
          ></cl-line>
          <cl-pie
            v-if="item.pie?.id"
            :id="item.pie?.id + nanoid()"
            :list="item.pie?.list"
            width="400px"
            height="400px"
          ></cl-pie>
          <cl-bar
            v-if="item.bar?.id"
            :id="item.bar?.id + nanoid()"
            :list="item.bar?.list"
            width="400px"
            height="400px"
          ></cl-bar>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { nanoid } from 'nanoid'

let carouselList = [
  {
    line: {
      id: 'line-1',
      list: [
        { value: 1048, name: 'Mon' },
        { value: 735, name: 'Tue' },
        { value: 580, name: 'Wed' },
        { value: 484, name: 'Thu' },
        { value: 300, name: 'Fri' },
      ],
    },
    pie: {
      id: 'pie-1',
      list: [
        { value: 1048, name: 'Mon' },
        { value: 735, name: 'Tue' },
        { value: 580, name: 'Wed' },
        { value: 484, name: 'Thu' },
        { value: 300, name: 'Fri' },
      ],
    },
    bar: {
      id: 'bar-1',
      list: [
        { value: 1048, name: 'Mon' },
        { value: 735, name: 'Tue' },
        { value: 580, name: 'Wed' },
        { value: 484, name: 'Thu' },
        { value: 300, name: 'Fri' },
      ],
    },
  },
  {
    line: {
      id: 'line-2',
      list: [
        { value: 50, name: 'Mon' },
        { value: 735, name: 'Tue' },
        { value: 580, name: 'Wed' },
        { value: 484, name: 'Thu' },
        { value: 300, name: 'Fri' },
      ],
    },
  },
]

onMounted(async () => {})
</script>

<style scoped>
.m-title {
  font-size: 20px;
  color: 333;
  font-weight: bold;
  padding: 10px;
}
.m-item {
  background: #fff;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
</style>

人工智能学习网站

https://chat.xutongbao.top