elementui el-table表格自动循环滚动【超详细图解】

Element UI的el-table组件不支持自动循环滚动，但你可以使用CSS或JavaScript实现这个功能。以下是一个使用Vue.js和Element UI实现自动循环滚动表格的示例：

1. 首先，确保你已经安装了Element UI并在你的项目中正确引入。
2. 在你的Vue组件中，使用el-table来创建表格，并使用ref属性来引用表格。
3. 使用JavaScript定时函数来周期性地滚动表格。

<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      ref="scrollTable"
      height="200"
      style="overflow: auto;"
    >
      <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() {
    // 设置定时器实现循环滚动
    setInterval(() => {
      const table = this.$refs.scrollTable;
      if (table) {
        const scrollHeight = table.$el.querySelector('.el-table__body-wrapper').scrollHeight;
        table.$el.querySelector('.el-table__body-wrapper').scrollTop += 1;
        if (table.$el.querySelector('.el-table__body-wrapper').scrollTop >= scrollHeight) {
          table.$el.querySelector('.el-table__body-wrapper').scrollTop = 0;
        }
      }
    }, 100); // 100毫秒滚动1像素
  }
};
</script>
 
<style>
.table-container {
  height: 200px; /* 设置表格的高度 */
  overflow: hidden;
}
</style>

在这个示例中，我们创建了一个具有固定高度的容器，其中包含了一个el-table。我们通过ref属性引用了表格，并在mounted生命周期钩子中设置了一个定时器，该定时器周期性地增加了表格内容区域的滚动位置。当滚动位置接近或达到最底部时，我们将滚动位置重置为0，从而实现循环滚动的效果。

请注意，这个示例是为了说明自动循环滚动的基本原理，并且实际上在表格数据量不足以超过表格高度时，滚动效果可能不会显示。在实际应用中，你需要确保表格内容足够长，并且定时器的滚动速度应适当调整以符合你的需求。