基於vue實現web端超大資料量表格

一、整體思路

 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條的資料。再這個過程當中可能會出現表格變白一下的過程，不過我覺得應該可以通過遮罩層來處理。

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

二、實現過程

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，謝謝(●'◡'●)，可能其中還存在很多問題，也希望能夠得到各位大佬的指點。