vue实现table自动滚动

Vue 实现表格自动滚动

使用 CSS 动画实现

通过 CSS 的 @keyframes 和 animation 属性实现表格内容的滚动效果。这种方法简单且性能较好，适合静态数据。

<template>
  <div class="scroll-container">
    <table class="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: 200px;
  overflow: hidden;
}

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

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

使用 JavaScript 定时器实现

通过 setInterval 动态修改表格的滚动位置，适合需要动态更新数据的场景。

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

<script>
export default {
  data() {
    return {
      data: [...], // 表格数据
      scrollSpeed: 1,
      intervalId: null
    };
  },
  mounted() {
    this.startScroll();
  },
  beforeDestroy() {
    this.stopScroll();
  },
  methods: {
    startScroll() {
      this.intervalId = setInterval(() => {
        const container = this.$refs.scrollContainer;
        container.scrollTop += this.scrollSpeed;
        if (container.scrollTop >= this.$refs.scrollBody.offsetHeight) {
          container.scrollTop = 0;
        }
      }, 20);
    },
    stopScroll() {
      clearInterval(this.intervalId);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 200px;
  overflow-y: auto;
}
</style>

使用第三方库实现

借助第三方库如 vue-seamless-scroll 可以快速实现无缝滚动效果。

安装依赖：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll :data="data" :class-option="scrollOption" class="scroll-table">
    <table>
      <tbody>
        <tr v-for="(item, index) in data" :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 {
      data: [...], // 表格数据
      scrollOption: {
        direction: 1, // 滚动方向（0向上，1向下）
        step: 1, // 步长
        limitMoveNum: 5, // 可视区域显示的行数
        hoverStop: true // 悬停时停止滚动
      }
    };
  }
};
</script>

<style>
.scroll-table {
  height: 200px;
  overflow: hidden;
}
</style>

动态数据更新处理

如果表格数据需要动态更新，需确保滚动逻辑与数据变化同步。例如在 JavaScript 定时器方法中监听数据变化：

watch: {
  data() {
    this.stopScroll();
    this.$nextTick(() => {
      this.startScroll();
    });
  }
}

性能优化建议

• 避免频繁操作 DOM，使用 CSS 动画或虚拟滚动技术。
• 对于大数据量，采用分页或懒加载减少渲染压力。
• 使用 requestAnimationFrame 替代 setInterval 实现更流畅的动画。

以上方法可根据实际需求选择，CSS 动画适合简单场景，JavaScript 定时器提供更多控制，第三方库则简化开发流程。