首先在main.js文件注册全局事件,代码如下:
Vue.directive('loadmore', {
bind(el, binding) {
var p = 0;
var t = 0;
var down = true;
var selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
//判断是否向下滚动
p = this.scrollTop;
// if ( t < p){down=true}else{down=false}
if(t < p){
down = true;
}else{
down = false;
}
t = p;
//判断是否到底
const sign = 10;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign && down) {
binding.value()
}
})
}
})
在组件中,使用自定义的事件:
v-loadmore="loadMore"
在methods中调用loadMore
这样就实现啦!!!