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

首先是 div结构布局

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

data定义属性：

 　　　　data() {
             return {
                 scrollTimer: null, // 滚动定时器
                 pauseTimer: null, // 暂停定时器
                 scrollId: 'scrollId', // 滚动容器id
                 scrollDirection: 'down' // 滚动方向 up向上 down向下
             };
         },

在methods内添加以下方法

 　　　　　　　//滚动条触发事件
             // 数据加载完成方法
             dataCompleteFun() {
                 // 开启滚动
                 this.autoScroll()
             },
             autoScroll() {
                 if (document.getElementById("scrollId")) {
                    const scrollHeight = document.getElementById("scrollId").scrollHeight
                     const clientHeight = document.getElementById("scrollId").clientHeight
                     const scroll = scrollHeight - clientHeight
                     // 滚动长度为0
                     if (scroll === 0) {
                         return
                    }
                 }
                 // 触发滚动方法
                 this.scrollFun()
                 // 去除点击监听
                 window.document.removeEventListener('click', this.pauseScroll)
                 // 重设点击监听
                 window.document.addEventListener('click', this.pauseScroll, false)
 
             },
             pauseScroll() {
                 // 定时器不为空
                 if (this.scrollTimer) {
                     // 清除定时器
                     clearInterval(this.scrollTimer)
                     this.scrollTimer = null
                     // 一秒钟后重新开始定时器
                     this.pauseTimer = setTimeout(() => {
                         this.scrollFun()
                    }, 2000)
                 }
             },
             scrollFun() {
                 // 如果定时器存在
                 if (this.scrollTimer) {
                     // 则先清除
                     clearInterval(this.scrollTimer)
                     this.scrollTimer = null
                 }
                 this.scrollTimer = setInterval(() => {
                     // 获取滚动条高度
                     if (document.getElementById("scrollId")) {
                         const scrollHeight = document.getElementById("scrollId").scrollHeight
                         const clientHeight = document.getElementById("scrollId").clientHeight
                         const scroll = scrollHeight - clientHeight
                         // 获取当前滚动条距离顶部高度
                         const scrollTop = document.getElementById("scrollId").scrollTop
                         // 向下滚动
                         if (this.scrollDirection === 'down') {
　　　　　　　　　　　　　　　　// 设置滚动速度 可更改 数字 2 为你想要的长度
                             const temp = scrollTop + 2
                             document.getElementById("scrollId").scrollTop = temp // 滚动
                             // 距离顶部高度  大于等于 滚动长度
                             if (scroll <= temp) {
                                 // 滚动到底部 停止定时器
                                 clearInterval(this.scrollTimer)
                                 this.scrollTimer = null
                                 // 改变方向
                                 this.scrollDirection = 'up'
                                 // 一秒后重开定时器
                                 setTimeout(() => {
                                     this.scrollFun()
                                 }, 1000)
                             }
                             // 向上滚动
                         } else if (this.scrollDirection === 'up') {
                             const temp = scrollTop - 2
                             document.getElementById("scrollId").scrollTop = temp // 滚动
                             // 距离顶部高度  小于等于 0
                             if (temp <= 0) {
                                 // 滚动到底部 停止定时器
                                 clearInterval(this.scrollTimer)
                                 this.scrollTimer = null
                                 // 改变方向
                                 this.scrollDirection = 'down'
                                 // 一秒后重开定时器
                                 setTimeout(() => {
                                     this.scrollFun()
                                 }, 1000)
                             }
                         }
                     }
                 }, 150)
             },

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

destroyed() {
   // 清理定时器
   clearTimeout(this.pauseTimer)
   this.pauseTimer = null
   clearInterval(this.scrollTimer)
   this.scrollTimer = null
   // 清理点击监听
   window.document.removeEventListener('click', this.pauseScroll)
},         
updated() {
    this.dataCompleteFun()
},

 

自此 el-table自动滚动结束