实现思路：先加载一开始会在页面上显示的数据，比如页面能显示20条数据，就先加载20条，剩下的数据监听滚动条，滚动条到底部再加载。
1.在data()中定义三个属性，分别存储数据指针、表格显示的数据和接口中获取的所有数据。
//数据指针 默认19
needle:19,
//表格数据
tableData:[],
//所有数据
allData:[],
2.从接口获取数据，并添加最初20条到tableData中。
// 所有数据
this.allData = response.rows;
// 初始值为19
this.needle=19;
this.tableData=[]
//判断数据长度有没有20个，有就先添加20个，没有直接获取所有数据
if(this.allData.length>19){
for(let i=0;i<20;i++){
this.tableData[i]=this.allData[i]
}
}else{
this.tableData=this.allData
}
3.定义懒加载函数文章来源：https://www.toymoban.com/news/detail-617977.html
lazyLoading(){
//获取table的body元素
let dom = document.querySelector(".el-table__body-wrapper");
console.log('dom',dom)
//添加对滚动条的监听
dom.addEventListener("scroll", (v) => {
const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
console.log("鼠标滑动-scrollDistance",scrollDistance)
// if (scrollDistance <= 0) { //分辨率问题，如果设置 100% ，滑倒最底部，scrollDistance的值 可能为 0.201 到 -0.201
if (scrollDistance <= 1) {
//等于0证明滚动条已经到底
// 一条一条加载记录，直至遍历到最后一条
while(this.needle<this.allData.length-1){
this.tableData[this.needle]=this.allData[this.needle]
console.log('this.tableData',this.tableData)
this.$forceUpdate()
this.needle++
}
}
});
},
4.最后将this.lazyLoading()放在mounted中文章来源地址https://www.toymoban.com/news/detail-617977.html
mounted() {
setTimeout(() => {
this.lazyLoading();
}, 1500);
},
到了这里，关于vue element table 懒加载 根据滚动条滑动动态加载数据 无分页或分页过大 渲染慢问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
