微客导航 » 文章资讯 » 监听element-ui table滚动事件的方法

监听element-ui table滚动事件的方法

2023-08-25 11:44:04 314

背景

做管理平台的项目,用到了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的绑定！希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

监听element-ui table滚动事件的方法

热门推荐

随机推荐