el-table當(dāng)數(shù)據(jù)量大的時(shí)候，實(shí)現(xiàn)滾動(dòng)到底部后加載數(shù)據(jù)，直接上js代碼，有其他需求請(qǐng)各自更改

?第一步、在data中定義兩個(gè)數(shù)組

data() {
   return {
       innerList:[],  //新數(shù)組，用于存放全部數(shù)據(jù)
       innerData:[],  //el-table表格數(shù)組
       dom:null,
    }
}

第二步、在數(shù)據(jù)發(fā)生改變的方法中先循環(huán)存放一部分?jǐn)?shù)據(jù)用于頁(yè)面顯示

watch: {
    data:{
         this.innerData=[];
         this.innerList=[];
         //將接口中獲取到的數(shù)據(jù)全部存放到數(shù)組
         this.innerList = this.data.records || this.data.data || [];
         //先循環(huán)出100條數(shù)據(jù)用于顯示
         for(let i=0;i<this.innerList.length;i++){
             if(i<100){
               this.innerData.push(this.innerList[i]);
             }
         }
    }
}

第三步、在mounted監(jiān)聽滾動(dòng)事件文章來源地址http://www.zghlxwxcb.cn/news/detail-602000.html

mounted() {
    // 設(shè)置滾動(dòng)條監(jiān)聽時(shí)間加載數(shù)據(jù)
            this.dom = this.$refs.elTable.bodyWrapper;
            this.dom.addEventListener('scroll', () => {
                let scrollTop = this.dom.scrollTop;   //滾動(dòng)距離
                let scrollHeight = this.dom.scrollHeight;   //滾動(dòng)條的總高度
                let clientHeight = this.dom.clientHeight;   //可視區(qū)的高度
                    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條數(shù)據(jù)
                        for (let index = id; index < id + 50; index++) {
                            this.innerData.push(this.innerList[index])
                        }
                    }
                }
            })
}

到了這里，關(guān)于vue+element-UI實(shí)現(xiàn)跟隨滾動(dòng)條加載表格數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！