vue 中 elementUI el-table 實現滾動加載

vue 中 elementUI el-table 實現滾動加載

一、需求

　　vue 中 elementUI el-table 實現滾動加載，場景：當表格需要顯示大量數據時，又想通過一頁來進行展示數據。

二、實現方法

　　a、監聽表格對應的滾動條

　　當表格滾動條到達底部時，通過監聽觸發加載下一頁的方法。

　　b、代碼實現

　　關鍵代碼如下：

    // 獲取表格對象
    let dom = document.querySelector(".el-table__body-wrapper");
    dom.addEventListener("scroll", (v) => {
      const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
      // 判斷是否到底，可以加載下一頁
      if (scrollDistance <= 1) {
        // 判斷是否全部加載完成
        if (this.page >= this.totalPage) {
          this.$message.warning("已經見底了 ～");
        }
        if (this.page < this.totalPage) {
          //當前頁數小於總頁數就請求
          this.page++; //當前頁數自增
          // 加載下一頁方法
          this.getNextList();
        }
      }
    });

 三、效果圖

四、源碼下載

以下是完整代碼，以及做了優化的用戶無感知的滾動加載（兩個版本哦~），下載地址：

https://download.csdn.net/download/you199037/15364095