vue element-ui table表格滚动加载方法
添加全局注册事件，用来监听滚动事件
window.Vue.directive('loadmore',{
bind(el,binding){
constselectWrap=el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll',function(){
letsign=100
constscrollDistance=this.scrollHeight-this.scrollTop-this.clientHeight
if(scrollDistance<=sign){
binding.value()
}
})
}
})
sign用于标记位置
直接让scrollDistance===sign并不能保证每次都会触发，所以用区间表示。后续会处理频繁触发问题。
添加事件
给需要无线加载的表格添加自定义事件，v-loadmore=”loadMore”。在methods中定义触发的事件
loadMore(){
if(this.loadSign){
this.loadSign=false
this.page++
if(this.page>10){
return
}
setTimeout(()=>{
this.loadSign=true
},1000)
console.log('到底了',this.page)
}
}
this.loadSign用于标记page是否继续递增
以上这篇vueelement-uitable表格滚动加载方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。