监听element-ui table滚动事件的方法
背景
做管理平台的项目,用到了element-ui,需要通过监听el-table滚动的位置来获取最新的数据,那么怎么样监听el-table的滚动呢?
准备
我们默认的技术栈是vue+element-ui
template代码:
绑定监听事件
mounted(){ //获取需要绑定的table this.dom=this.$refs.table.bodyWrapper this.dom.addEventListener('scroll',()=>{ //滚动距离 letscrollTop=this.dom.scrollTop //变量windowHeight是可视区的高度 letwindowHeight=this.dom.clientHeight||this.dom.clientHeight //变量scrollHeight是滚动条的总高度 letscrollHeight=this.dom.scrollHeight||this.dom.scrollHeight if(scrollTop+windowHeight===scrollHeight){ //获取到的不是全部数据当滚动到底部继续获取新的数据 if(!this.allData)this.getMoreLog() console.log('scrollTop',scrollTop+'windowHeight',windowHeight+'scrollHeight',scrollHeight) } }) }
获取到新的数据后,调整滚动条的位置
getMoreLog(){ ... this.dom.scrollTop=this.dom.scrollTop-100 ... }
结语
至此我们已经完成了对table的绑定!希望对大家的学习有所帮助,也希望大家多多支持毛票票。