实现el-table表格滚动

代码工人笔记

于 2023-03-21 20:33:34 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/zhao3756/article/details/129696990

该文章展示了如何在Vue.js应用中实现el-table组件的自动滚动效果。通过获取表格的bodyWrapper元素，设置定时器改变scrollTop属性来模拟滚动，并在滚动到底部时重置scrollTop到0，从而实现循环滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现el-table表格滚动

<template>
  <div >
    <el-table
      :data="tableData"
      height="400px"
      ref="scrollTable"
    >
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      tableData: []
    };
  },
  beforeDestroy() {
    clearInterval(this.timer); // 销毁定时器
  },
  mounted() {
   
    this.scrollbars();
  },
  methods: {
    scrollbars() {
      const table1 = this.$refs.scrollTable;
      // 拿到表格中承载数据的div元素
      const divData1 = table1.bodyWrapper;
      clearInterval(this.timer);
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.timer = setInterval(() => {
        // 元素自增距离顶部1像素
        divData1.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (
          divData1.clientHeight + divData1.scrollTop >=
          divData1.scrollHeight
        ) {
          // 重置table距离顶部距离
          divData1.scrollTop = 0;
        }
      }, 1200); // 滚动速度
    }
  },
};
</script>