點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:59:19

基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決

基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決:一、整體思路 1.思路來(lái)源最近工作比較忙好久沒寫文章了，有一丟丟不知道如何寫起了，那就先說(shuō)說(shuō)我是為什么要開發(fā)本文的組件把。公司有一個(gè)定位系統(tǒng)，基本上來(lái)說(shuō)一個(gè)定位單位一分鐘或者更短就會(huì)有一個(gè)定位點(diǎn)，這樣一天下來(lái)就會(huì)有很多定位點(diǎn)了，如果表格想要一

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決:一、整體思路 1.思路來(lái)源最近工作比較忙好久沒寫文章了，有一丟丟不知道如何寫起了，那就先說(shuō)說(shuō)我是為什么要開發(fā)本文的組件把。公司有一個(gè)定位系統(tǒng)，基本上來(lái)說(shuō)一個(gè)定位單位一分鐘或者更短就會(huì)有一個(gè)定位點(diǎn)，這樣一天下來(lái)就會(huì)有很多定位點(diǎn)了，如果表格想要一

一、整體思路

1.思路來(lái)源

最近工作比較忙好久沒寫文章了，有一丟丟不知道如何寫起了，那就先說(shuō)說(shuō)我是為什么要開發(fā)本文的組件把。公司有一個(gè)定位系統(tǒng)，基本上來(lái)說(shuō)一個(gè)定位單位一分鐘或者更短就會(huì)有一個(gè)定位點(diǎn)，這樣一天下來(lái)就會(huì)有很多定位點(diǎn)了，如果表格想要一下子放一天甚至三天的數(shù)據(jù)，那么數(shù)據(jù)量將會(huì)特別大（可能會(huì)到達(dá)5萬(wàn)條左右的數(shù)據(jù)），如果我們顯示的列又比較多的話，那么表格的卡頓問(wèn)題就會(huì)很明顯了。我們公司web端選擇的ui框架是 iview ，說(shuō)實(shí)話 iview 的其他組件還行，不過(guò)表格的話在大量數(shù)據(jù)面前顯得很疲軟，反而我以前使用的 easyui 之類的老框架的表格性能和功能上都很好，畢竟它們已經(jīng)經(jīng)歷了很多優(yōu)化，表格這個(gè)組件的拓展性很大，想要在性能和功能上都做好十分的困難。

easyui 是個(gè)與時(shí)俱進(jìn)的框架，有一次我點(diǎn)開它的官網(wǎng)發(fā)現(xiàn)它已經(jīng)出了基于現(xiàn)在熱門的 vue、react、angular 的ui組件。于是我這次選擇去看看它基于vue的表格，于是我看到了這個(gè)組件附上連接http://www.jeasyui.net/demo_vue/681.html 。我發(fā)現(xiàn)它通過(guò)分頁(yè)延遲加載的方法解決了大數(shù)據(jù)量卡斷的問(wèn)題，這是我基本能夠理解的，不過(guò)看完之后我有一些疑問(wèn)，首先如果他只渲染了一部分?jǐn)?shù)據(jù)，在滾動(dòng)條滾動(dòng)的時(shí)候再加載數(shù)據(jù)，那么為什么滾動(dòng)條為什么一直是那么長(zhǎng)。機(jī)智的我打開了開發(fā)者模式查看了表格部分的html代碼

一看我明白了，圖中的表格底部和表格頂部部分就是滾動(dòng)條高度一直不變的原因，而中間部分更具滾動(dòng)條的滾動(dòng)始終只加載40條數(shù)據(jù)，這樣大數(shù)據(jù)量的表格卡頓問(wèn)題就解決了

2.思路確認(rèn)

那么思路我們基本上可以有了，我們來(lái)理一下。

首先我們可以認(rèn)為這個(gè)表格分為 3個(gè)部分 [表格頂部:( top )、表格滾動(dòng)區(qū)域:( screen )、表格底部:( bottom )]。

top 和 bottom 部分的問(wèn)題是高度的計(jì)算，基本上可以確定應(yīng)該再滾動(dòng)條滾動(dòng)的時(shí)候，得到滾動(dòng)的位置，然后更具總數(shù)據(jù)量和 screen 部分的數(shù)據(jù)量計(jì)算出 top 和 bottom 的高度，想到這里我腦海里就出現(xiàn)了幾個(gè)字（ 計(jì)算屬性 ）用在這里應(yīng)該再合適不過(guò)了。

screen 部分的實(shí)現(xiàn)心中的初步想法是更具滾動(dòng)高度計(jì)算應(yīng)該加載的數(shù)據(jù)。不過(guò)如何做到在過(guò)度數(shù)據(jù)的時(shí)候更加流暢，心中還有一些些疑惑于是我繼續(xù)觀察了它的html。為了更好的表述，前端達(dá)芬奇打開了他的畫圖軟件開始了作畫(●'◡'●)

首先我們剛剛提到了screen部分始終顯示40條數(shù)據(jù)，所以我們通過(guò)滾動(dòng)事件判斷當(dāng)頁(yè)面滾動(dòng)到超過(guò)screenbottom部分的底部的時(shí)候我們就向下加載20條數(shù)據(jù)同時(shí)刪除screentop部分的數(shù)據(jù)這樣用戶使用的時(shí)候不會(huì)出現(xiàn)向下滾動(dòng)加載然后輕微上移又要加載的情況。看到這里很多人肯定在想如果這個(gè)用戶是個(gè)皮皮怪，拉著滾動(dòng)條瘋狂拖動(dòng)怎么辦，那我們就再來(lái)看一張圖片(●'◡'●)

如果皮皮怪們將滾動(dòng)條滾到了大于本來(lái)待加載20條數(shù)據(jù)高度的位置，我們就用新的處理方式刪除所有的40條數(shù)據(jù)，根據(jù)滾動(dòng)的位置計(jì)算當(dāng)前位置上下各20條的數(shù)據(jù)。再這個(gè)過(guò)程當(dāng)中可能會(huì)出現(xiàn)表格變白一下的過(guò)程，不過(guò)我覺得應(yīng)該可以通過(guò)遮罩層來(lái)處理。

基本上的思路有了，那么我們開始實(shí)現(xiàn)它吧 (●'◡'●)。

二、實(shí)現(xiàn)過(guò)程

（首先我先說(shuō)一下，我實(shí)現(xiàn)的這個(gè)表格并不是考慮的那么全面，開發(fā)的初衷只是解決卡斷這個(gè)問(wèn)題，表格排序多選之類的功能等之后再拓展）

1.表格的結(jié)構(gòu)

表格通過(guò)2個(gè)table標(biāo)簽組成，第一個(gè)是表頭第二個(gè)是數(shù)據(jù)內(nèi)容，方便后期拓展。這里偷懶沒有把表頭和內(nèi)部?jī)?nèi)容和tr再單獨(dú)成一個(gè)組件讓代碼可讀性更好之后還可以再優(yōu)化。

2.邏輯實(shí)現(xiàn)

我們直接說(shuō)最主要的邏輯部分，首先我們看看props和data部分

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

然后我們看看滾動(dòng)事件應(yīng)該做一些什么先上代碼

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

首先我們通過(guò) scrollTop 這個(gè)變量在每次進(jìn)入滾動(dòng)事件的時(shí)候記錄垂直滾動(dòng)條的位置，如果這個(gè)值不變那么這次滾動(dòng)就是 左右滾動(dòng)， 如果這個(gè)值變大看那么就是 向下滾動(dòng) ，如果這個(gè)值變小了那么就是 向上滾動(dòng) 。左右滾動(dòng)的時(shí)候我們需要做的事情就是讓表頭隨著內(nèi)容一起移動(dòng)，這樣就可以達(dá)到左右移動(dòng)表頭動(dòng)上下移動(dòng)表頭固定的效果。

//滾動(dòng)條左右滾動(dòng)
 handleScrollLeft(topScroll, bottomScroll) {
 //頂部表頭跟隨底部滾動(dòng)
 topScroll.scrollTo(bottomScroll.scrollLeft, topScroll.pageYOffset);
 },

如果是向上移動(dòng)我們就要做我們?cè)谒悸分刑岣叩氖虑榱讼瓤创a

 //滾動(dòng)條向上滾動(dòng)
 handleScrollTop() {
 //如果加載的數(shù)據(jù)小于默認(rèn)加載的數(shù)據(jù)量
 if (this.dataTotal > this.loadNum) {
 let computeHeight = this.dataTop; //數(shù)據(jù)需要處理的時(shí)候的高度
 if (
 this.scrollTop < computeHeight &&
 this.scrollTop >= computeHeight - this.loadNum * this.tdHeight
 ) {
 this.showLoad = true;
 //如果滾動(dòng)高度到達(dá)數(shù)據(jù)顯示頂部高度
 if (this.dataTotal > this.loadedNum) {
 //如果數(shù)據(jù)總數(shù)大于已經(jīng)渲染的數(shù)據(jù)
 if (this.dataTotal - this.loadedNum >= this.loadNum) {
 //如果數(shù)據(jù)總數(shù)減去已經(jīng)渲染的數(shù)據(jù)大于等于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); //滾動(dòng)的位置在第幾條數(shù)據(jù)
 if (scrollNum - this.loadNum >= 0) {
 this.dataProcessing(this.loadNum * 2, scrollNum, "topAll");
 } else {
 this.dataProcessing(scrollNum + this.loadNum, scrollNum, "topAll");
 }
 }
 }
 },

首先我們判斷加載的數(shù)據(jù)是否小于默認(rèn)加載的數(shù)據(jù)量，如果時(shí)那么就不需要做任何邏輯了，因?yàn)橐呀?jīng)加載了所有的數(shù)據(jù)了。

判斷滾動(dòng)高度是不是已經(jīng)超過(guò)了當(dāng)前screen部分?jǐn)?shù)據(jù)的頂部位置并且小于當(dāng)前screen部分?jǐn)?shù)據(jù)的頂部位置減去默認(rèn)加載數(shù)據(jù)量的高度，也就是我們之前提到第一種情況，那么大于當(dāng)前screen部分?jǐn)?shù)據(jù)的頂部位置減去默認(rèn)加載數(shù)據(jù)量的高度就是第二種情況了。

如果進(jìn)入2個(gè)判斷this.showLoad設(shè)置為true，將遮罩層打開，避免表格變白影響用戶的體驗(yàn)，提示在加載。

第一種情況如果數(shù)據(jù)頂部小于默認(rèn)加載數(shù)據(jù)，我們只加載剩余高度的數(shù)據(jù)如果大于則加載默認(rèn)加載的this.loadNum數(shù)量的數(shù)據(jù)

第二種情況也是一樣判斷只不過(guò)判斷this.loadNum*2是否大于數(shù)據(jù)頂部的數(shù)據(jù)條數(shù)，只加載剩余高度的數(shù)據(jù)或者加載this.loadNum*2數(shù)量的數(shù)據(jù)。

向下滾動(dòng)其實(shí)是一樣的思路我們看一下代碼

 //滾動(dòng)條向下滾動(dòng)
 handleScrollBottom() {
 let computeHeight =
 this.dataTop +
 this.loadedNum * this.tdHeight -
 (this.tableHeight - this.tdHeight - 3); //數(shù)據(jù)需要處理的時(shí)候的高度
 if (
 this.scrollTop > computeHeight &&
 this.scrollTop <= computeHeight + this.tdHeight * this.loadNum
 ) {
 this.showLoad = true;
 //如果滾動(dòng)高度到達(dá)數(shù)據(jù)顯示底部高度
 if (this.dataTotal > this.loadedNum) {
 //如果數(shù)據(jù)總數(shù)大于已經(jīng)渲染的數(shù)據(jù)
 if (this.dataTotal - this.loadedNum >= this.loadNum) {
 //如果數(shù)據(jù)總數(shù)減去已經(jīng)渲染的數(shù)據(jù)大于等于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); //滾動(dòng)的位置在第幾條數(shù)據(jù)
 if (scrollNum + this.loadNum <= this.dataTotal) {
 this.dataProcessing(scrollNum, this.loadNum * 2, "bottomAll");
 } else {
 this.dataProcessing(
 scrollNum,
 this.dataTotal - scrollNum + this.loadNum,
 "bottomAll"
 );
 }
 }
 },

計(jì)算了好了有4種情況，并且計(jì)算出了對(duì)應(yīng)需要?jiǎng)h除和新增的數(shù)據(jù)量。我們來(lái)看看dataProcessing這個(gè)函數(shù)做了什么事情。

 //上下滾動(dòng)時(shí)數(shù)據(jù)處理
 dataProcessing(topNum, bottomNum, type) {
 let topPosition = parseInt(this.dataTop / this.tdHeight);
 if (type === "top") {
 this.showTableList.splice(this.loadedNum - bottomNum, bottomNum); //減去底部數(shù)據(jù)
 for (var i = 1; i <= topNum; i++) {
 //加上頂部數(shù)據(jù)
 let indexNum = topPosition - i;
 this.tableList[indexNum].index = indexNum + 1;
 this.showTableList.unshift(this.tableList[indexNum]);
 }
 this.loadedNum = this.loadedNum + topNum - bottomNum; //重新計(jì)算實(shí)際渲染數(shù)據(jù)條數(shù)
 this.dataTop = this.dataTop - topNum * this.tdHeight; //重新計(jì)算渲染數(shù)據(jù)的高度
 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); //減去頂部數(shù)據(jù)
 for (var i = 0; i < bottomNum; i++) {
 //加上底部數(shù)據(jù)
 let indexNum = topPosition + this.loadedNum + i;
 this.tableList[indexNum].index = indexNum + 1;
 this.showTableList.push(this.tableList[indexNum]);
 }
 this.loadedNum = this.loadedNum - topNum + bottomNum; //重新計(jì)算實(shí)際渲染數(shù)據(jù)條數(shù)
 this.dataTop = this.dataTop + topNum * this.tdHeight; //重新計(jì)算渲染數(shù)據(jù)的高度
 document.getElementById("bottomDiv").scrollTop =
 document.getElementById("bottomDiv").scrollTop -
 topNum * this.tdHeight;
 this.scrollTop = document.getElementById("bottomDiv").scrollTop;
 } else if (type == "bottomAll") {
 this.showTableList = []; //減去頂部數(shù)據(jù)
 let scrollNum = topNum;
 for (var i = 0; i < bottomNum; i++) {
 //加上底部數(shù)據(jù)
 let indexNum = scrollNum - this.loadNum + i;
 this.tableList[indexNum].index = indexNum + 1;
 this.showTableList.push(this.tableList[indexNum]);
 }
 this.loadedNum = bottomNum; //重新計(jì)算實(shí)際渲染數(shù)據(jù)條數(shù)
 this.dataTop = (scrollNum - this.loadNum) * this.tdHeight; //重新計(jì)算渲染數(shù)據(jù)的高度
 this.scrollTop = document.getElementById("bottomDiv").scrollTop;
 } else if (type == "topAll") {
 this.showTableList = []; //減去頂部數(shù)據(jù)
 let scrollNum = bottomNum;
 for (var i = 0; i < topNum; i++) {
 //加上底部數(shù)據(jù)
 let indexNum = scrollNum - topNum + this.loadNum + i;
 this.tableList[indexNum].index = indexNum + 1;
 this.showTableList.push(this.tableList[indexNum]);
 }
 this.loadedNum = topNum; //重新計(jì)算實(shí)際渲染數(shù)據(jù)條數(shù)
 this.dataTop = (scrollNum - topNum + this.loadNum) * this.tdHeight; //重新計(jì)算渲染數(shù)據(jù)的高度
 this.scrollTop = document.getElementById("bottomDiv").scrollTop;
 }
 this.showLoad = false;
 },

首先先刪除我們之前計(jì)算好的應(yīng)該刪除的數(shù)據(jù)我們用 splice 方法刪除對(duì)應(yīng)的數(shù)據(jù)，然后通過(guò)一個(gè)簡(jiǎn)單的for循環(huán)，如果是向上滾動(dòng)應(yīng)該將數(shù)據(jù)加在頂部我們用 unshift 方法，如果是向下滾動(dòng)我們應(yīng)該加在底部我們用 push 方法。

處理好數(shù)據(jù)以后我們還需要重新計(jì)算實(shí)際渲染數(shù)據(jù)條數(shù)，將loadedNum的值改為現(xiàn)在顯示的數(shù)據(jù)條數(shù)

重新計(jì)算渲染數(shù)據(jù)的高度，計(jì)算出dataTop現(xiàn)在顯示的數(shù)據(jù)頂部的高度

因?yàn)?top 和 bottom 的變化會(huì)導(dǎo)致表格scrollTop的值出現(xiàn)變化，這個(gè)時(shí)候我們就要?jiǎng)討B(tài)把滾動(dòng)條移動(dòng)到正確的位置

最后我們來(lái)說(shuō)說(shuō)之前考慮的 top 和 bottom ，一開始我們就想好了應(yīng)該用計(jì)算屬性去做，事實(shí)也說(shuō)明的確這樣，我們看看代碼

 computed: {
 tableOtherTop() {
 //表格剩余數(shù)據(jù)頂部高度
 return this.dataTop;
 },
 tableOtherBottom() {
 //表格剩余數(shù)據(jù)底部高度
 return (
 this.dataTotal * this.tdHeight -
 this.dataTop -
 this.loadedNum * this.tdHeight
 );
 }
 },

這樣就能保證 top 和 bottom 高度的變化能夠觸發(fā)表格的變化。

top 的高度應(yīng)該就是顯示數(shù)據(jù)頂部的高度（ dataTop ）。

bottom 的高度應(yīng)該就是數(shù)據(jù)的總高度-顯示的數(shù)據(jù)的高度（ this.loadedNum * this.tdHeight ）- top 的高度。

最后我們來(lái)看看效果圖

總結(jié)

這個(gè)組件的開發(fā)最麻煩的地方就是理清楚各種情況，然后寫好各種計(jì)算保證不出錯(cuò)。開發(fā)的過(guò)程中我也有一種想要自己開發(fā)個(gè)簡(jiǎn)易table組件的想法，無(wú)奈感覺個(gè)人水平有限，不過(guò)我也在很多地方做了伏筆，等以后有時(shí)間再來(lái)拓展這個(gè)組件，加油~~~///(^v^)\\\~~~。

這里附上我的 github 地址 https://github.com/github307896154/ExtraLongTable ，我把項(xiàng)目已經(jīng)上傳上去了，如果喜歡可以給我個(gè)start，謝謝(●'◡'●)，可能其中還存在很多問(wèn)題，也希望能夠得到各位大佬的指點(diǎn)。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：卡頓 VUE 的表格

熱門焦點(diǎn)

基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決

基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決

基于vue實(shí)現(xiàn)web端超大數(shù)據(jù)量表格的卡頓解決

最新推薦

猜你喜歡

熱門推薦