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 婚前女儿生日祝福语简短