vue 表格上下轮播图

可以使用 Vue 的 transition 组件来实现表格上下轮播图的效果。具体实现步骤如下：

1. 在表格中添加一个 div 容器，用于包裹需要轮播的图片。

2. 使用 CSS 将这个容器设置为固定高度，同时设置 overflow 属性为 hidden，以便实现上下滚动的效果。

3. 在 Vue 中定义一个变量，用于记录当前显示的图片索引。

4. 使用 setInterval 函数定时切换图片，同时在切换时使用 transition 组件实现过渡效果。

下面是代码示例：

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>图片</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dataList" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>
            <div class="img-container">
              <transition name="slide-up">
                <img :src="item.images[currentIndex]" :key="currentIndex">
              </transition>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          name: '图片1',
          images: ['image1-1.jpg', 'image1-2.jpg', 'image1-3.jpg']
        },
        {
          name: '图片2',
          images: ['image2-1.jpg', 'image2-2.jpg', 'image2-3.jpg']
        },
        {
          name: '图片3',
          images: ['image3-1.jpg', 'image3-2.jpg', 'image3-3.jpg']
        }
      ],
      currentIndex: 0
    }
  },
  mounted() {
    // 每 3 秒钟切换一次图片
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % 3
    }, 3000)
  }
}
</script>

<style>
.table-container {
  max-height: 300px;
  overflow-y: auto;
}

.img-container {
  height: 100px;
  overflow: hidden;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.5s;
}

.slide-up-enter,
.slide-up-leave-to {
  transform: translateY(100%);
}
</style>