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

这篇具有很好参考价值的文章主要介绍了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监听滚动事件文章来源地址https://www.toymoban.com/news/detail-602000.html

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

到了这里，关于vue+element-UI实现跟随滚动条加载表格数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！