elementui 表格自动滚动

html

<el-table
 :data="tableReal.data"
 ref="scroll_Table"
 @mouseenter.native="autoScroll(true)"
 @mouseleave.native="autoScroll(false)"
 style="width: 100%">
   <el-table-column prop="live_time" label="时间" width="160px"> el-table-column>
   
 el-table>
1
2
3
4
5
6
7
8
9

javascript

 mounted(){
      this.autoScroll()
      this.realSearch()
    },
    beforeDestroy() {
      this.autoScroll(true)
    },
    methods: {
      
      realSearch(){
        this.autoScroll(true)
        this.$GET("api/server/warnings",this.form,(res)=>{ 
          // console.log(res)
          this.tableReal.data=res.data
          this.autoScroll()
        })
      },
      
      // 设置自动滚动
      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) // 滚动速度
        }
      },
    }
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