当前位置：首页 > VUE

vue表格实现自动滚动

2026-02-22 03:21:56VUE

实现 Vue 表格自动滚动的方法

使用 CSS 动画实现平滑滚动

通过 CSS 的 @keyframes 和 transform 属性实现表格内容的无限滚动效果。这种方法适合静态数据或需要简单动画的场景。

<template>
  <div class="scroll-container">
    <table class="auto-scroll-table">
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
.scroll-container {
  height: 300px;
  overflow: hidden;
}

.auto-scroll-table {
  animation: scroll 10s linear infinite;
}

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

使用 JavaScript 定时器动态更新数据

通过 setInterval 定时修改数据或滚动位置，适合需要动态控制滚动速度和方向的场景。

vue表格实现自动滚动

<template>
  <div ref="scrollContainer" class="scroll-container">
    <table>
      <tbody>
        <tr v-for="(item, index) in visibleData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [...], // 原始数据
      visibleData: [],
      currentIndex: 0,
      scrollSpeed: 50 // 滚动速度（毫秒）
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.data.length;
        this.visibleData = [
          ...this.data.slice(this.currentIndex),
          ...this.data.slice(0, this.currentIndex)
        ];
      }, this.scrollSpeed);
    }
  }
};
</script>

结合第三方库实现复杂滚动

使用如 vue-seamless-scroll 等专门库简化实现，适合需要复杂效果（如暂停、调速）的场景。

vue表格实现自动滚动

安装依赖：

npm install vue-seamless-scroll

示例代码：

<template>
  <vue-seamless-scroll
    :data="tableData"
    :class-option="scrollOption"
    class="scroll-container"
  >
    <table>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </tbody>
    </table>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      tableData: [...],
      scrollOption: {
        direction: 1, // 0向上，1向下
        step: 0.5, // 步长
        limitMoveNum: 5, // 可见行数
        hoverStop: true // 悬停暂停
      }
    };
  }
};
</script>