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表格滚动加载方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短