elementui el-table表格自动循环滚动

Element UI 的 el-table 组件不支持自动循环滚动，但你可以使用 CSS 和 JavaScript 来实现这个功能。以下是一个简单的例子，展示如何使用原生 JavaScript 实现循环滚动效果：

<template>
  <div class="table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 数据项
      ]
    };
  },
  mounted() {
    this.startAutoScroll();
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
  methods: {
    startAutoScroll() {
      this.intervalId = setInterval(() => {
        const container = this.$el.querySelector('.table-container');
        container.scrollTop += 1;
        if (container.scrollHeight - container.scrollTop === container.clientHeight) {
          container.scrollTop = 0;
        }
      }, 100); // 可以调整时间来改变滚动速度
    },
    stopAutoScroll() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    }
  }
};
</script>
 
<style>
.table-container {
  overflow: auto;
  height: 200px; /* 根据需要设置高度 */
}
</style>

在这个例子中，我们使用了 Vue 的 mounted 和 beforeDestroy 生命周期钩子来控制循环滚动的开始和停止。startAutoScroll 方法使用 setInterval 每 100 毫秒滚动一次，如果滚动到了底部，则重置 scrollTop 回到顶部，实现循环滚动的效果。

请注意，Element UI 的 el-table 组件可能会有自己的滚动处理，因此可能需要调整 CSS 来确保上述代码按预期工作。