前言

創(chuàng)新互聯(lián)建站服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過十余年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行網(wǎng)站建設(shè)、網(wǎng)站制作、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

vue渲染小數(shù)據(jù)挺快,大數(shù)據(jù)vue開始出現(xiàn)卡頓現(xiàn)象，本文講給大家詳細(xì)介紹關(guān)于vue大數(shù)據(jù)表格卡頓問題的解決方法

點(diǎn)我在線體驗(yàn)Demo(請(qǐng)用電腦查看)

親測(cè)蘋果電腦，chrome瀏覽器無卡頓現(xiàn)象，其它瀏覽器并未測(cè)試，如遇到卡頓請(qǐng)備注系統(tǒng)和瀏覽器，方便我后續(xù)優(yōu)化，謝謝

先看一下效果,一共1000 X 100 = 10W個(gè)單元格基本感受不到卡頓，而且每個(gè)單元格點(diǎn)擊可以編輯，支持固定頭和固定列

項(xiàng)目源代碼地址 Github (本地下載)

解決問題核心點(diǎn)：橫向滾動(dòng)加載，豎向滾動(dòng)加載

項(xiàng)目背景

筆者最近在做廣告排期功能，需要進(jìn)行點(diǎn)位預(yù)占，大的合同可能需要對(duì)多個(gè)資源排期，周期可能到幾年這樣，然后我們的頁面交互是這樣

橫向每個(gè)月30個(gè)單元格，最多的3年，36個(gè)月，每行36*30=1080個(gè)單元格

豎向100個(gè)資源，總共約️10W個(gè)單元格，然后每個(gè)單元格里面會(huì)有一個(gè)輸入框，一個(gè)庫存總數(shù)，所以總數(shù)是20W個(gè)，內(nèi)網(wǎng)使用，接口請(qǐng)求根本不是問題，可以瀏覽器渲染就扛不住了接口回來之后會(huì)出現(xiàn)幾十秒的白屏，整個(gè)頁面處于卡死狀態(tài)

這還不算，加載出之后頁面操作也是非?？?，滑動(dòng)延遲嚴(yán)重，頁面基本處于癱瘓狀態(tài)

之前的功能是基于jquery開發(fā)的，項(xiàng)目重構(gòu)用的vue,UI采用了ElementUI，ElmentUI中的表格在數(shù)據(jù)量較大是有嚴(yán)重的性能問題，最直接的表現(xiàn)就是白屏?xí)r間較長，而且會(huì)出現(xiàn)渲染錯(cuò)亂

所以就想著自己實(shí)現(xiàn)一個(gè)表格，解決卡頓問題

實(shí)現(xiàn)思路

表格拆分，動(dòng)態(tài)加載

表格橫向按月拆分，每個(gè)月份單獨(dú)一個(gè)table，月份table外層放一個(gè)占位div，根據(jù)橫向滾動(dòng)位置控制展示

豎向按資源拆分，同樣包裹一個(gè)占位div,按照滾動(dòng)位置動(dòng)態(tài)加載，始終保持dom數(shù)量上線

動(dòng)態(tài)編輯，按需生成編輯輸入框

不同的標(biāo)簽在瀏覽器渲染時(shí)性能是不一樣的，比如input這種標(biāo)簽就比span等標(biāo)簽重許多，所以不能滿屏input

方案就是點(diǎn)擊單元格展示輸入框，焦點(diǎn)丟失移除，此處的展示非display控制顯示隱藏，而是v-if控制dom是否加載

代碼分解

固定頭

  

  

  

  

   
{{item.month}}
  
  

   
{{d_item}}
  
  
  
  
 

名稱欄目：vue大數(shù)據(jù)表格卡頓問題的完美解決方案-創(chuàng)新互聯(lián)
標(biāo)題來源：http://weahome.cn/article/iphoj.html