工作中我們經(jīng)常會用到element-ui組件庫中的le-table組件來展示數(shù)據(jù)，但當table的數(shù)據(jù)源數(shù)量過大的時候統(tǒng)一展示可能會出現(xiàn)頁面卡頓，且會影響用戶體驗，為此我們可以嘗試對el-table中的數(shù)據(jù)做懶加載的效果展示：

1. 掛在階段監(jiān)聽el-table的scroll滾動事件

2. 當table表格滾動條的位置+調(diào)試的固定高度+要顯示數(shù)據(jù)的高度>=el-table-body(當前加載出的table數(shù)據(jù)總高度)時就可以向table數(shù)據(jù)源中push進新的數(shù)據(jù)了

// 1.在頁面掛在階段監(jiān)聽el-table組件的滾動事件
    mounted() {
        this.$refs.table.$el.addEventListener('scroll',scrollmethods)
    },
    scrollmethods(e) {
      // 獲取到table表格（可視）的dom
      let realNode = e.srcElement;
      // 獲取到table所有數(shù)據(jù)的真實dom
      let tableBOM = this.$refs.table.$el.querySelector('el-table-body');
      // 如果table數(shù)據(jù)的總高度 <= 可視table滾動條到頂部的距離+550固定值（這個大家根據(jù)實際情況調(diào)試）+20條數(shù)據(jù)的高度
      if(tableBOM.offsetHeight <= realNode.scrollTop + 550 + (20*3)) {
        // 下面是模擬向table數(shù)據(jù)源中新添加新的數(shù)據(jù)
        this.tableData = this.tableData.push(arr);
      }
    }

補充：另外也可以使用scrollHeitht(總高度)-scrollTop(頁面被卷曲高度)-clientHeight(可視區(qū)高度)=0來進行判斷，

offsetHeitht：指元素的像素高度，高度包含該元素的垂直內(nèi)邊距和邊框，且是一個整數(shù)。

scrollHeight：指元素的總高度，包含滾動條中的內(nèi)容。只讀屬性。不帶px單位。

scrollTop：當元素出現(xiàn)滾動條時，向下拖動滾動條，內(nèi)容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條，則scrollTop的值為0，該值只能是正值。

clientHeight：元素客戶區(qū)的大小，指的是元素內(nèi)容及其邊框所占據(jù)的空間大小，實際上就是可視區(qū)域的大小。

若-頁面被卷曲的高度-可視范圍的高度=0就i加載數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-400479.html

到了這里，關(guān)于vue中數(shù)據(jù)滾動顯示 實現(xiàn)Element-UI中el-table內(nèi)數(shù)據(jù)的懶加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！