当前位置：首页 > VUE

vue实现table自动滚动

2026-01-21 06:36:25VUE

Vue实现Table自动滚动的方法

使用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动态修改表格的滚动位置，适用于需要动态更新数据的场景。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <table>
      <tbody ref="tableBody">
        <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.startAutoScroll();
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
  methods: {
    startAutoScroll() {
      this.intervalId = setInterval(() => {
        const container = this.$refs.scrollContainer;
        container.scrollTop += this.scrollSpeed;

        if (container.scrollTop >= this.$refs.tableBody.offsetHeight - container.offsetHeight) {
          container.scrollTop = 0;
        }
      }, 20);
    },
    stopAutoScroll() {
      clearInterval(this.intervalId);
    }
  }
}
</script>

使用第三方库实现高级滚动

对于复杂需求，可使用vue-seamless-scroll等专门库实现无缝滚动效果。

安装依赖：

npm install vue-seamless-scroll

实现代码：

<template>
  <vue-seamless-scroll 
    :data="tableData" 
    class="seamless-table"
    :class-option="scrollOption">
    <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向下 2向左 3向右
        limitMoveNum: 5,
        step: 1,
        hoverStop: true,
        singleHeight: 36,
        waitTime: 1000
      }
    }
  }
}
</script>