第一步:
获取到当前滚动加载的el-table表格节点
注意的是 如果存在多个表格,用ref获取dom节点,需要指定为第一个,
并且是当前dom节点下的bodyWrapper元素,
然后给这个元素添加滚动事件
this.$nextTick(function(){
var dom =this.$refs[`personTable_${that.scrollTableId}`];
var tableBodyEle = dom[0].bodyWrapper;
tableBodyEle.addEventListener('scroll', that.onPersonScroll);
})
滚动加载的判断条件:
let inner = that.$refs['personTable_'+that.scrollTableId][0].bodyWrapper;
let scrollTop = inner.scrollTop,//当前元素区域的滚动条高度
// 变量windowHeight是可视区的高度
let windowHeight = inner.clientHeight || inner.clientHeight
// 变量scrollHeight是滚动条的总高度
let scrollHeight = inner.scrollHeight || inner.scrollHeight
if (scrollTop + windowHeight === scrollHeight) {//滚动条滚出的高度加上可视区高度 等于滚动条的总高度,则需要加载
if (that.scrollPersonFlag) {
//设置一个滚动加载的开关,默认为true
//滚动一次变为false
//滚动一次如果当前数据数量小于总数,要置为true;
that.scrollPersonFlag =false
var signatoryNo = that.scrollTableId;
var pageSize =40;
that.startPersonRow +=40;
that.loading =true;
_getPersonSignatory({signatureId:this.signatureId,startRow:that.startPersonRow,pageSize,signatoryNo}).then(res=>{//请求数据的接口
that.loading =false;
if(res.data.success){
that.ruleFormSigner.personSignerList.frontendData.forEach(item=>{
if(item.signatoryId == that.scrollTableId){
if(item.memberList.length < res.data.result.total){//如果当前滚动加载的盒子中的成员变量小于总数,则开关还是打开状态 否则是关闭状态
that.scrollPersonFlag =true;
}
}
})
}
})
}
}