el-row 循环动态展示

el-row 是一个 Vue.js 的组件，用于创建水平滚动的列表。要实现循环动态展示，可以使用以下步骤：

1. 在 el-row 中添加一个 slot，用于渲染列表项。
2. 创建一个数组，存储要展示的数据。
3. 在 el-row 中使用 v-for 循环渲染列表项，并根据数组的长度计算每个列表项的宽度。
4. 使用 CSS 中的 animation 和 keyframes 属性创建动画效果。
5. 在动画完成后，将数组的第一个元素添加到数组的末尾，实现循环展示。

下面是一个简单的示例代码：

<template>
  <el-row class="carousel" :gutter="10">
    <div slot="default" class="item" v-for="(item, index) in items" :key="index" :style="{'width': itemWidth + 'px'}">{{ item }}</div>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
      itemWidth: 100,
    };
  },
  mounted() {
    setInterval(() => {
      this.items.push(this.items.shift());
    }, 2000);
  },
};
</script>

<style>
.carousel {
  width: 500px;
  overflow: hidden;
}

.item {
  height: 100px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
  display: inline-block;
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

在上面的示例中，我们使用了一个定时器，每隔 2 秒将数组的第一个元素添加到数组的末尾，实现了循环展示的效果。同时，我们使用了 animation 和 keyframes 属性，创建了一个名为 move 的动画，让列表项水平滚动。