基於vue實現web端超大數據量表格

1、總體思路

 1.思路來源

      最近工做比較忙很久沒寫文章了，有一丟丟不知道如何寫起了，那就先說說我是爲何要開發本文的組件把。公司有一個定位系統，基本上來講一個定位單位一分鐘或者更短就會有一個定位點，這樣一天下來就會有不少定位點了，若是表格想要一會兒放一天甚至三天的數據，那麼數據量將會特別大（可能會到達5萬條左右的數據），若是咱們顯示的列又比較多的話，那麼表格的卡頓問題就會很明顯了。咱們公司web端選擇的ui框架是iview ，說實話iview的其餘組件還行，不過表格的話在大量數據面前顯得很疲軟，反而我之前使用的easyui之類的老框架的表格性能和功能上都很好，畢竟它們已經經歷了不少優化，表格這個組件的拓展性很大，想要在性能和功能上都作好十分的困難。

    easyui是個與時俱進的框架，有一次我點開它的官網發現它已經出了基於如今熱門的vue、react、angular的ui組件。因而我此次選擇去看看它基於vue的表格，因而我看到了這個組件附上鍊接www.jeasyui.net/demo_vue/68…。我發現它經過分頁延遲加載的方法解決了大數據量卡斷的問題，這是我基本可以理解的，不過看完以後我有一些疑問，首先若是他只渲染了一部分數據，在滾動條滾動的時候再加載數據，那麼爲何滾動條爲何一直是那麼長。機智的我打開了開發者模式查看了表格部分的html代碼

一看我明白了，圖中的表格底部和表格頂部部分就是滾動條高度一直不變的緣由，而中間部分根據滾動條的滾動始終只加載40條數據，這樣大數據量的表格卡頓問題就解決了

2.思路確認

那麼思路咱們基本上能夠有了，咱們來理一下。

• 首先咱們能夠認爲這個表格分爲3個部分[表格頂部:(top)、表格滾動區域:(screen)、表格底部:(bottom)]。
• top和bottom部分的問題是高度的計算，基本上能夠肯定應該再滾動條滾動的時候，獲得滾動的位置，而後根據總數據量和screen部分的數據量計算出top和bottom的高度，想到這裏我腦海裏就出現了幾個字（計算屬性）用在這裏應該再合適不過了。
• screen部分的實現心中的初步想法是根據滾動高度計算應該加載的數據。不過如何作到在過分數據的時候更加流暢，心中還有一些些疑惑因而我繼續觀察了它的html。爲了更好的表述，前端達芬奇打開了他的畫圖軟件開始了做畫(●'◡'●)

首先咱們剛剛提到了screen部分始終顯示40條數據，因此咱們經過滾動事件判斷當頁面滾動到超過screenbottom部分的底部的時候咱們就向下加載20條數據同時刪除screentop部分的數據這樣用戶使用的時候不會出現向下滾動加載而後輕微上移又要加載的狀況。看到這裏不少人確定在想若是這個用戶是個皮皮怪，拉着滾動條瘋狂拖動怎麼辦，那咱們就再來看一張圖片(●'◡'●)

若是皮皮怪們將滾動條滾到了大於原本待加載20條數據高度的位置，咱們就用新的處理方式刪除全部的40條數據，根據滾動的位置計算當前位置上下各20條的數據。再這個過程中可能會出現表格變白一下的過程，不過我以爲應該能夠經過遮罩層來處理。

    基本上的思路有了，那麼咱們開始實現它吧 (●'◡'●)。

2、實現過程

（首先我先說一下，我實現的這個表格並非考慮的那麼全面，開發的初衷只是解決卡斷這個問題，表格排序多選之類的功能等以後再拓展）

1.表格的結構

表格經過2個table標籤組成，第一個是表頭第二個是數據內容，方便後期拓展。這裏偷懶沒有把表頭和內部內容和tr再單獨成一個組件讓代碼可讀性更好以後還能夠再優化。

2.邏輯實現

咱們直接說最主要的邏輯部分，首先咱們看看props和data部分

props: {
    loadNum: {
      //默認加載行數
      type: [Number, String],
      default() {
        return 20;
      }
    },
    tdHeight: {
      //表格行高
      type: [Number, String],
      default() {
        return 40;
      }
    },
    tableHeight: {
      //表格高度
      type: [Number, String],
      default() {
        return "200";
      }
    },
    tableList: {
      //全部表格數據
      type: Array,
      default() {
        return [];
      }
    },
    columns: {
      //全部表格匹配規則
      type: Array,
      default() {
        return [];
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isScroll: 17,
      showLoad: false,
      columnsBottom: [], //實際渲染表格規則
      showTableList: [], //實際顯示的表格數據
      loadedNum: 0, //實際渲染的數據數量
      dataTotal: 0, //總數據條數
      dataTop: 0, //渲染數據頂部的高度
      scrollTop: 0, //滾動上下的距離
      interval: null, //判斷滾動是否中止的定時器
      scrollHeight: 0, //數據滾動的高度
      selectTr: -1 //選擇的行
    };
  },複製代碼

而後咱們看看滾動事件應該作一些什麼先上代碼

//滾動條滾動 handleScroll(event) { let bottomScroll = document.getElementById("bottomDiv"); let topScroll = document.getElementById("topDiv"); if (bottomScroll.scrollTop > this.scrollTop) { //記錄上一次向下滾動的位置 this.scrollTop = bottomScroll.scrollTop; //向下滾動 this.handleScrollBottom(); } else if (bottomScroll.scrollTop < this.scrollTop) { //記錄上一次向上滾動的位置 this.scrollTop = bottomScroll.scrollTop; //向上滾動 this.handleScrollTop(); } else { //左右滾動 this.handleScrollLeft(topScroll, bottomScroll); } }複製代碼

首先咱們經過scrollTop這個變量在每次進入滾動事件的時候記錄垂直滾動條的位置，若是這個值不變那麼此次滾動就是左右滾動，若是這個值變大看那麼就是向下滾動，若是這個值變小了那麼就是向上滾動。左右滾動的時候咱們須要作的事情就是讓表頭隨着內容一塊兒移動，這樣就能夠達到左右移動表頭動上下移動表頭固定的效果。

//滾動條左右滾動
    handleScrollLeft(topScroll, bottomScroll) {
      //頂部表頭跟隨底部滾動
      topScroll.scrollTo(bottomScroll.scrollLeft, topScroll.pageYOffset);
    },複製代碼

若是是向上移動咱們就要作咱們在思路中提升的事情了先看代碼

//滾動條向上滾動
    handleScrollTop() {
      //若是加載的數據小於默認加載的數據量
      if (this.dataTotal > this.loadNum) {
        let computeHeight = this.dataTop; //數據須要處理的時候的高度
        if (
          this.scrollTop < computeHeight &&
          this.scrollTop >= computeHeight - this.loadNum * this.tdHeight
        ) {
          this.showLoad = true;
          //若是滾動高度到達數據顯示頂部高度
          if (this.dataTotal > this.loadedNum) {
            //若是數據總數大於已經渲染的數據
            if (this.dataTotal - this.loadedNum >= this.loadNum) {
              //若是數據總數減去已經渲染的數據大於等於loadNum
              this.dataProcessing(
                this.loadNum,
                this.loadedNum - this.loadNum,
                "top"
              );
            } else {
              this.dataProcessing(
                this.dataTotal - this.loadedNum,
                this.dataTotal - this.loadedNum,
                "top"
              );
            }
          }
        } else if (
          this.scrollTop <
          computeHeight - this.loadNum * this.tdHeight
        ) {
          this.showLoad = true;
          let scrollNum = parseInt(this.scrollTop / this.tdHeight); //滾動的位置在第幾條數據
          if (scrollNum - this.loadNum >= 0) {
            this.dataProcessing(this.loadNum * 2, scrollNum, "topAll");
          } else {
            this.dataProcessing(scrollNum + this.loadNum, scrollNum, "topAll");
          }
        }
      }
    },複製代碼

1. 首先咱們判斷加載的數據是否小於默認加載的數據量，若是時那麼就不須要作任何邏輯了，由於已經加載了全部的數據了。
2. 判斷滾動高度是否是已經超過了當前screen部分數據的頂部位置而且小於當前screen部分數據的頂部位置減去默認加載數據量的高度，也就是咱們以前提到第一種狀況，那麼大於當前screen部分數據的頂部位置減去默認加載數據量的高度就是第二種狀況了。
3. 若是進入2個判斷this.showLoad設置爲true，將遮罩層打開，避免表格變白影響用戶的體驗，提示在加載。
4. 第一種狀況若是數據頂部小於默認加載數據，咱們只加載剩餘高度的數據若是大於則加載默認加載的this.loadNum數量的數據
5. 第二種狀況也是同樣判斷只不過判斷this.loadNum*2是否大於數據頂部的數據條數，只加載剩餘高度的數據或者加載this.loadNum*2數量的數據。

向下滾動實際上是同樣的思路咱們看一下代碼

//滾動條向下滾動
    handleScrollBottom() {
      let computeHeight =
        this.dataTop +
        this.loadedNum * this.tdHeight -
        (this.tableHeight - this.tdHeight - 3); //數據須要處理的時候的高度
      if (
        this.scrollTop > computeHeight &&
        this.scrollTop <= computeHeight + this.tdHeight * this.loadNum
      ) {
        this.showLoad = true;
        //若是滾動高度到達數據顯示底部高度
        if (this.dataTotal > this.loadedNum) {
          //若是數據總數大於已經渲染的數據
          if (this.dataTotal - this.loadedNum >= this.loadNum) {
            //若是數據總數減去已經渲染的數據大於等於20
            this.dataProcessing(
              this.loadedNum - this.loadNum,
              this.loadNum,
              "bottom"
            );
          } else {
            this.dataProcessing(
              this.dataTotal - this.loadedNum,
              this.dataTotal - this.loadedNum,
              "bottom"
            );
          }
        }
      } else if (
        this.scrollTop >
        computeHeight + this.tdHeight * this.loadNum
      ) {
        this.showLoad = true;
        let scrollNum = parseInt(this.scrollTop / this.tdHeight); //滾動的位置在第幾條數據
        if (scrollNum + this.loadNum <= this.dataTotal) {
          this.dataProcessing(scrollNum, this.loadNum * 2, "bottomAll");
        } else {
          this.dataProcessing(
            scrollNum,
            this.dataTotal - scrollNum + this.loadNum,
            "bottomAll"
          );
        }
      }
    },複製代碼

計算了好了有4種狀況，而且計算出了對應須要刪除和新增的數據量。咱們來看看dataProcessing這個函數作了什麼事情。

//上下滾動時數據處理
    dataProcessing(topNum, bottomNum, type) {
      let topPosition = parseInt(this.dataTop / this.tdHeight);
      if (type === "top") {
        this.showTableList.splice(this.loadedNum - bottomNum, bottomNum); //減去底部數據
        for (var i = 1; i <= topNum; i++) {
          //加上頂部數據
          let indexNum = topPosition - i;
          this.tableList[indexNum].index = indexNum + 1;
          this.showTableList.unshift(this.tableList[indexNum]);
        }
        this.loadedNum = this.loadedNum + topNum - bottomNum; //從新計算實際渲染數據條數
        this.dataTop = this.dataTop - topNum * this.tdHeight; //從新計算渲染數據的高度
        document.getElementById("bottomDiv").scrollTop =
          document.getElementById("bottomDiv").scrollTop +
          bottomNum * this.tdHeight;
        this.scrollTop = document.getElementById("bottomDiv").scrollTop;
      } else if (type == "bottom") {
        this.showTableList.splice(0, topNum); //減去頂部數據
        for (var i = 0; i < bottomNum; i++) {
          //加上底部數據
          let indexNum = topPosition + this.loadedNum + i;
          this.tableList[indexNum].index = indexNum + 1;
          this.showTableList.push(this.tableList[indexNum]);
        }
        this.loadedNum = this.loadedNum - topNum + bottomNum; //從新計算實際渲染數據條數
        this.dataTop = this.dataTop + topNum * this.tdHeight; //從新計算渲染數據的高度
        document.getElementById("bottomDiv").scrollTop =
          document.getElementById("bottomDiv").scrollTop -
          topNum * this.tdHeight;
        this.scrollTop = document.getElementById("bottomDiv").scrollTop;
      } else if (type == "bottomAll") {
        this.showTableList = []; //減去頂部數據
        let scrollNum = topNum;
        for (var i = 0; i < bottomNum; i++) {
          //加上底部數據
          let indexNum = scrollNum - this.loadNum + i;
          this.tableList[indexNum].index = indexNum + 1;
          this.showTableList.push(this.tableList[indexNum]);
        }
        this.loadedNum = bottomNum; //從新計算實際渲染數據條數
        this.dataTop = (scrollNum - this.loadNum) * this.tdHeight; //從新計算渲染數據的高度
        this.scrollTop = document.getElementById("bottomDiv").scrollTop;
      } else if (type == "topAll") {
        this.showTableList = []; //減去頂部數據
        let scrollNum = bottomNum;
        for (var i = 0; i < topNum; i++) {
          //加上底部數據
          let indexNum = scrollNum - topNum + this.loadNum + i;
          this.tableList[indexNum].index = indexNum + 1;
          this.showTableList.push(this.tableList[indexNum]);
        }
        this.loadedNum = topNum; //從新計算實際渲染數據條數
        this.dataTop = (scrollNum - topNum + this.loadNum) * this.tdHeight; //從新計算渲染數據的高度
        this.scrollTop = document.getElementById("bottomDiv").scrollTop;
      }
      this.showLoad = false;
    },複製代碼

1. 首先先刪除咱們以前計算好的應該刪除的數據咱們用splice方法刪除對應的數據，而後經過一個簡單的for循環，若是是向上滾動應該將數據加在頂部咱們用unshift方法，若是是向下滾動咱們應該加在底部咱們用push方法。
2. 處理好數據之後咱們還須要從新計算實際渲染數據條數，將loadedNum的值改成如今顯示的數據條數
3. 從新計算渲染數據的高度，計算出dataTop如今顯示的數據頂部的高度
4. 由於top和bottom的變化會致使表格scrollTop的值出現變化，這個時候咱們就要動態把滾動條移動到正確的位置

最後咱們來講說以前考慮的top和bottom，一開始咱們就想好了應該用計算屬性去作，事實也說明的確這樣，咱們看看代碼

computed: {
    tableOtherTop() {
      //表格剩餘數據頂部高度
      return this.dataTop;
    },
    tableOtherBottom() {
      //表格剩餘數據底部高度
      return (
        this.dataTotal * this.tdHeight -
        this.dataTop -
        this.loadedNum * this.tdHeight
      );
    }
  },複製代碼

這樣就能保證top和bottom高度的變化可以觸發表格的變化。

top的高度應該就是顯示數據頂部的高度（dataTop）。

bottom的高度應該就是數據的總高度-顯示的數據的高度（this.loadedNum * this.tdHeight）-top的高度。

最後咱們來看看效果圖

總結

這個組件的開發最麻煩的地方就是理清楚各類狀況，而後寫好各類計算保證不出錯。開發的過程當中我也有一種想要本身開發個簡易table組件的想法，無奈感受我的水平有限，不過我也在不少地方作了伏筆，等之後有時間再來拓展這個組件，加油~~~///(^v^)\\\~~~。

這裏附上個人github地址github.com/github30789…，我把項目已經上傳上去了，若是喜歡能夠給我個start，謝謝(●'◡'●)，可能其中還存在不少問題，也但願可以獲得各位大佬的指點。