合肥网站建设服务,哪里有免费的网站推广软件,一站式做网站,蓝色经典通用网站模板html源码下载el-table当数据量大的时候#xff0c;实现滚动到底部后加载数据#xff0c;直接上js代码#xff0c;有其他需求请各自更改 第一步、在data中定义两个数组 data() {return {innerList:[], //新数组#xff0c;用于存放全部数据innerData:[], //el-table表格数组dom:null,…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 i0;ithis.innerList.length;i){if(i100){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])}}}}) }