vue+element-UI实现跟随滚动条加载表格数据

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])



                        }



                    }



                }



            })



}