Vue Element-ui 之 el-table自动滚动

首先是 div结构布局

 1 　　　　　　　　　　　　　　　　<div id="scrollId">//对el-table盒子设置 id 属性
 2                                 <div style="height: 100%;">
 3                                     <el-table row-class-name="tr_style" :stripe="true" :data="tableData" 
 4                                         :show-header="false"
 5                                         :cell-style="{borderColor:'rgba(9, 14, 34, 1)'}"
 6                                         :header-cell-style="{borderColor:'rgba(9, 14, 34, 0.5)',fontWeight:'400',background:'#0d1d3f',color:'#fff'}">
 7                                         <el-table-column align="center" border v-for="(item,index) in cellData"
 8                                             :key="index"  :prop="item.prop">
 9                                          
10                                         el-table-column>
11                                     el-table>
12                                 div>
13                             div>

data定义属性：

 1 　　　　data() {
 2             return {11                 scrollTimer: null, // 滚动定时器
12                 pauseTimer: null, // 暂停定时器
13                 scrollId: 'scrollId', // 滚动容器id
14                 scrollDirection: 'down' // 滚动方向 up向上 down向下
15             };
16         },

在methods内添加以下方法

 1 　　　　　　　//滚动条触发事件
 2             // 数据加载完成方法
 3             dataCompleteFun() {
 4                 // 开启滚动
 5                 this.autoScroll()
 6             },
 7             autoScroll() {
 8                 if (document.getElementById("scrollId")) {
 9                     const scrollHeight = document.getElementById("scrollId").scrollHeight
10                     const clientHeight = document.getElementById("scrollId").clientHeight
11                     const scroll = scrollHeight - clientHeight
12                     // 滚动长度为0
13                     if (scroll === 0) {
14                         return
15                     }
16                 }
17                 // 触发滚动方法
18                 this.scrollFun()
19                 // 去除点击监听
20                 window.document.removeEventListener('click', this.pauseScroll)
21                 // 重设点击监听
22                 window.document.addEventListener('click', this.pauseScroll, false)
23 
24             },
25             pauseScroll() {
26                 // 定时器不为空
27                 if (this.scrollTimer) {
28                     // 清除定时器
29                     clearInterval(this.scrollTimer)
30                     this.scrollTimer = null
31                     // 一秒钟后重新开始定时器
32                     this.pauseTimer = setTimeout(() => {
33                         this.scrollFun()
34                     }, 2000)
35                 }
36             },
37             scrollFun() {
38                 // 如果定时器存在
39                 if (this.scrollTimer) {
40                     // 则先清除
41                     clearInterval(this.scrollTimer)
42                     this.scrollTimer = null
43                 }
44                 this.scrollTimer = setInterval(() => {
45                     // 获取滚动条高度
46                     if (document.getElementById("scrollId")) {
47                         const scrollHeight = document.getElementById("scrollId").scrollHeight
48                         const clientHeight = document.getElementById("scrollId").clientHeight
49                         const scroll = scrollHeight - clientHeight
50                         // 获取当前滚动条距离顶部高度
51                         const scrollTop = document.getElementById("scrollId").scrollTop
52                         // 向下滚动
53                         if (this.scrollDirection === 'down') {
　　　　　　　　　　　　　　　　// 设置滚动速度 可更改 数字 2 为你想要的长度
54                             const temp = scrollTop + 2
55                             document.getElementById("scrollId").scrollTop = temp // 滚动
56                             // 距离顶部高度  大于等于 滚动长度
57                             if (scroll <= temp) {
58                                 // 滚动到底部 停止定时器
59                                 clearInterval(this.scrollTimer)
60                                 this.scrollTimer = null
61                                 // 改变方向
62                                 this.scrollDirection = 'up'
63                                 // 一秒后重开定时器
64                                 setTimeout(() => {
65                                     this.scrollFun()
66                                 }, 1000)
67                             }
68                             // 向上滚动
69                         } else if (this.scrollDirection === 'up') {
70                             const temp = scrollTop - 2
71                             document.getElementById("scrollId").scrollTop = temp // 滚动
72                             // 距离顶部高度  小于等于 0
73                             if (temp <= 0) {
74                                 // 滚动到底部 停止定时器
75                                 clearInterval(this.scrollTimer)
76                                 this.scrollTimer = null
77                                 // 改变方向
78                                 this.scrollDirection = 'down'
79                                 // 一秒后重开定时器
80                                 setTimeout(() => {
81                                     this.scrollFun()
82                                 }, 1000)
83                             }
84                         }
85                     }
86                 }, 150)
87             },

在methods外，与methods同级，添加以下生命周期方法

 1 　　　　　destroyed() {
 2             // 清理定时器
 3             clearTimeout(this.pauseTimer)
 4             this.pauseTimer = null
 5             clearInterval(this.scrollTimer)
 6             this.scrollTimer = null
 7             // 清理点击监听
 8             window.document.removeEventListener('click', this.pauseScroll)
 9         },16         updated() {
17             this.dataCompleteFun()
18         },

自此 el-table自动滚动结束