一、整體思路
1.思路來源
最近工作比較忙好久沒寫文章了，有一丟丟不知道如何寫起了，那就先說說我是為什么要開發本文的組件把。公司有一個定位系統，基本上來說一個定位單位一分鐘或者更短就會有一個定位點，這樣一天下來就會有很多定位點了，如果表格想要一下子放一天甚至三天的數據，那么數據量將會特別大（可能會到達5萬條左右的數據），如果我們顯示的列又比較多的話，那么表格的卡頓問題就會很明顯了。我們公司web端選擇的ui框架是 iview ，說實話 iview 的其他組件還行，不過表格的話在大量數據面前顯得很疲軟，反而我以前使用的 easyui 之類的老框架的表格性能和功能上都很好，畢竟它們已經經歷了很多優化，表格這個組件的拓展性很大，想要在性能和功能上都做好十分的困難。
easyui 是個與時俱進的框架，有一次我點開它的官網發現它已經出了基于現在熱門的 vue、react、angular 的ui組件。于是我這次選擇去看看它基于vue的表格，于是我看到了這個組件附上連接http://www.jeasyui.net/demo_vue/681.html 。我發現它通過分頁延遲加載的方法解決了大數據量卡斷的問題，這是我基本能夠理解的，不過看完之后我有一些疑問，首先如果他只渲染了一部分數據，在滾動條滾動的時候再加載數據，那么為什么滾動條為什么一直是那么長。機智的我打開了開發者模式查看了表格部分的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"); } } } },向下滾動其實是一樣的思路我們看一下代碼
//滾動條向下滾動 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; },最后我們來說說之前考慮的 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 地址 https://github.com/github307896154/ExtraLongTable ，我把項目已經上傳上去了，如果喜歡可以給我個start，謝謝(●'◡'●)，可能其中還存在很多問題，也希望能夠得到各位大佬的指點。
新聞熱點
疑難解答
