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 过年祝福语简短又温馨