vue中实现滚动条加载更多加载表格数据
时隔3个⽉ 终于要更新了 我发现⽹上写的很多都不尽⼈意或者⽐较散，这⾥更新我⾃⼰在项⽬中实现的滚动条到底部开始加载数据：jquery滚动条滚动到底部
mounted(){
window.addEventListener("scroll",this.handleScroll,true);
},
handleScroll(e){
//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = e.target.scrollTop;
//变量windowHeight是可视区的⾼度
var windowHeight = e.target.clientHeight;
//变量scrollHeight是滚动条的总⾼度
var scrollHeight = e.target.scrollHeight;
//滚动条到底部的条件
// console.log(scrollTop, windowHeight, scrollHeight);
if(scrollTop + windowHeight >= scrollHeight){
//在此处放⼊你的加载更多⽅法
this.loadingShow =true;
// iginHeight = scrollHeight;
// console.log(this.designType);
if(this.designType =="RQT"){
iginRQTHeight < scrollHeight){
JDRTpageNo =JDRTpageNo +1;
}
request
.get(
`/jmc-xxx/xxxx?${this.filterUrl}&pageNo=${JDRTpageNo}&pageSize=${JDRTpageSize}&requirementType=${this.designType}` )
.then((data)=>{
this.loadingShow =false;
this.tableData.forEach((item)=>{
quirementType ===this.designType){
item.childs = ds);
}
});
this.isRefreshBool =true;
})
.catch((err)=>{
this.loadingShow =false;
this.$("加载失败");
});
}else{
iginDRHeight < scrollHeight){
JDRpageNo =JDRpageNo +1;
}
request
.get(
`/jmc-xxx/xxx?${this.filterUrl}&pageNo=${JDRpageNo}&pageSize=${JDRpageSize}&requirementType=${this.designType}` )
.then((data)=>{
this.loadingShow =false;
this.tableData.forEach((item)=>{
quirementType ===this.designType){
item.childs = ds);
}
});
this.isRefreshBool =true;
})
.catch((err)=>{
this.loadingShow =false;
this.$("加载失败");
});
}
}
},
功能点可能和很多不同的是我这⾥是树型的表格，默认只能打开⼀个，那么这⾥我就只能根据每个打开的内容去判断加载，所以需要两个不同的originRQTHeight初始⾼度
项⽬使⽤vxe-table有想了解的⼩伙伴可以私聊交流技术。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。