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

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

1.代码实现：

<template>
  <div>
    <div class="app-container">
      <el-table
        v-loading="loading"
        :data="tableData"
        :max-height="500"
        ref="scroll_Table"
        @mouseenter.native="autoScroll(true)"
        @mouseleave.native="autoScroll(false)"
      >
      </el-table>
    </div>
  </div>
</template>

<script>
import mixins from "./mixins";
export default {
  data() {
  	return {
  		loading: false,
        tableData: [],
        scrolltimer: '', // 自动滚动的定时任务
  	}
  },
  mounted() {
      this.autoScroll()
  },
  beforeDestroy() {
   	this.autoScroll(true)
  },
  methods: {
  	// 设置自动滚动
    autoScroll(stop) {
        const table = this.$refs.scroll_Table
        // 拿到表格中承载数据的div元素
        const divData = table.$refs.bodyWrapper
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        if (stop) {
            //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
            window.clearInterval(this.scrolltimer)
        } else {
            this.scrolltimer = window.setInterval(() => {
                // 元素自增距离顶部1像素
                divData.scrollTop += 1
                // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                    // 重置table距离顶部距离
                    divData.scrollTop = 0
                    // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                    // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                }
            }, 150) // 滚动速度
        }
    },
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

2.效果图

普通的表格数据自动循环滚动，并且滚动到最后一条数据后，再回到第一条数据进行滚动。