When developing Vue, when the backend returns too much data at one time, the slice method is used to lazy load the data, so that the data is loaded when the table scroll bar scrolls to the bottom.

When there is a lot of data returned in the processing background, it is impossible for the front end to load all the data into the table list at one time. We can monitor the scroll bar, and the front end uses the slice method to intercept the data, so as to realize the lazy loading of data.

    this.currentPage = 1;
    this.pageSize = 30;   //设置初始值和

    // 把获取到的数据同一个放到一个data数组内，这个数组时没有进行处理过的数据。
    this.allData = // api········//把通过接口获取到的数据存储起来。


    this.data = this.allData.slice(0,this.pageSize); //默认进入页面时，如果是大于30，会自动截取前30。

    //每次page数+1，就进行数组的截取。table列表展示data的数据。
    function initPage(){
    
    
        this.currentPage = this.currentPage + 1;
        this.data = this.allData.slice(0, this.currentPage * this.pageSize);
    }



    //监听滚动条的是否滚动到元素底部，当滚动条滚动到元素底部时，进行数据加载事件的触发。
    //获取滚动元素的dom，进行滚动监听。
    const dom = document.getElementsByClassName("list-wrapper-tables")[0];
    dom.addEventListener('scroll', function () {
    
    
        const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight
        if (scrollDistance <= 0) {
    
    
        that.initPage();
        }
    })

Lazy loading of data can be easily realized through the above methods.