第一步:
獲取到當(dāng)前滾動(dòng)加載的el-table表格節(jié)點(diǎn)
注意的是 如果存在多個(gè)表格,用ref獲取dom節(jié)點(diǎn),需要指定為第一個(gè),
并且是當(dāng)前dom節(jié)點(diǎn)下的bodyWrapper元素,
然后給這個(gè)元素添加滾動(dòng)事件
this.$nextTick(function(){
var dom =this.$refs[`personTable_${that.scrollTableId}`];
? ? var tableBodyEle = dom[0].bodyWrapper;
? ? tableBodyEle.addEventListener('scroll', that.onPersonScroll);
})
滾動(dòng)加載的判斷條件:
let inner = that.$refs['personTable_'+that.scrollTableId][0].bodyWrapper;
let scrollTop = inner.scrollTop蚤认,//當(dāng)前元素區(qū)域的滾動(dòng)條高度
// 變量windowHeight是可視區(qū)的高度
let windowHeight = inner.clientHeight || inner.clientHeight
// 變量scrollHeight是滾動(dòng)條的總高度
let scrollHeight = inner.scrollHeight || inner.scrollHeight
if (scrollTop + windowHeight === scrollHeight) {//滾動(dòng)條滾出的高度加上可視區(qū)高度 等于滾動(dòng)條的總高度,則需要加載
? ??if (that.scrollPersonFlag) {
? ? ? ? //設(shè)置一個(gè)滾動(dòng)加載的開(kāi)關(guān)糕伐,默認(rèn)為true
? ? ? ? //滾動(dòng)一次變?yōu)閒alse
? ? ? ? //滾動(dòng)一次如果當(dāng)前數(shù)據(jù)數(shù)量小于總數(shù)砰琢,要置為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=>{//請(qǐng)求數(shù)據(jù)的接口
????????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){//如果當(dāng)前滾動(dòng)加載的盒子中的成員變量小于總數(shù),則開(kāi)關(guān)還是打開(kāi)狀態(tài)? 否則是關(guān)閉狀態(tài)
? ? ? ? ? ? ? ? ? ? ????????that.scrollPersonFlag =true;
? ? ? ? ? ? ? ? ? ? ? ?????}
????????????????????????}
????????????????????})
????????????}
????????})
????????}
}