el-table当数据量大的时候,实现滚动到底部后加载数据,直接上js代码,有其他需求请各自更改
第一步、在data中定义两个数组
data() {return {innerList:[], //新数组,用于存放全部数据innerData:[], //el-table表格数组dom:null,}
}
第二步、在数据发生改变的方法中先循环存放一部分数据用于页面显示
watch: {data:{this.innerData=[];this.innerList=[];//将接口中获取到的数据全部存放到数组this.innerList = this.data.records || this.data.data || [];//先循环出100条数据用于显示for(let i=0;i<this.innerList.length;i++){if(i<100){this.innerData.push(this.innerList[i]);}}}
}
第三步、在mounted监听滚动事件
mounted() {// 设置滚动条监听时间加载数据this.dom = this.$refs.elTable.bodyWrapper;this.dom.addEventListener('scroll', () => {let scrollTop = this.dom.scrollTop; //滚动距离let scrollHeight = this.dom.scrollHeight; //滚动条的总高度let clientHeight = this.dom.clientHeight; //可视区的高度if (scrollTop + clientHeight === scrollHeight) {if (this.innerList.length <= this.innerData.length) return if (this.innerData.length + 50 > this.innerList.length) {// 如果不够50条就全部渲染上去this.dom.scrollTop = this.dom.scrollTop - 50; this.innerData=[];this.innerData.push(...this.innerList)} else {this.dom.scrollTop = this.dom.scrollTop - 50;let id = this.innerData.length;//每次渲染50条数据for (let index = id; index < id + 50; index++) {this.innerData.push(this.innerList[index])}}}})
}