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自动滚动结束