element?table?數(shù)據(jù)量大頁(yè)面卡頓的解決

更新時(shí)間：2022年01月24日 10:07:37 作者：狗狗狗狗亮

這篇文章主要介紹了element?table?數(shù)據(jù)量大頁(yè)面卡頓的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element table數(shù)據(jù)量大頁(yè)面卡頓

table顯示醫(yī)院列表，這里后臺(tái)未做分頁(yè)，總共數(shù)據(jù)大約8000條。

一次性全部賦值給table整個(gè)頁(yè)面都會(huì)卡頓好幾秒。

查看了請(qǐng)求接口到數(shù)據(jù)返回的時(shí)間為192ms，可以接受。

在這里插入圖片描述

應(yīng)該是頁(yè)面渲染的問(wèn)題。

這邊就在前端做了分頁(yè)處理。

調(diào)用接口

 // 獲取醫(yī)院列表
    getHospitalList() {
      this.$api.Hospital.GetHospitalList().then(res => {
        if (res.status == 200) {
          this.tableData = res.data.response;
          this.total = res.data.response.length;
        }
      });
    },
  // 分頁(yè)
  handleCurrentChange(currentPage) {
    this.currentPage = currentPage;
  },
  // 搜索
 searchList() {
   let params = "";
   switch (this.select) {
     case "1":
       if (this.input3) {
         params = this.input3;
         this.$api.Hospital.QueryHospitalsByName(params).then(res => {
           if (res.data.length > 0) {
             this.tableData = res.data;
             this.currentPage = 1;
             this.total = res.data.length;
           } else {
             this.$message({
               message: "未查詢(xún)到醫(yī)院信息",
               type: "info"
             });
           }
           console.log(res);
         });
       }
       break;
     case "2":
       if (this.input3) {
         params = this.input3;
         this.$api.Hospital.QueryHospitalsByCode(params).then(res => {
           if (res.data.length > 0) {
             this.tableData = res.data;
             this.currentPage = 1;
             this.total = res.data.length;
           } else {
             this.$message({
               message: "未查詢(xún)到醫(yī)院信息",
               type: "info"
             });
           }
           console.log(res);
         });
       }
       break;
     default:
       console.log(111);
   }
 },

table組件

<el-table
    :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize )  "
    border
    style="width: 100%"
    height="400"
    size="mini"
    highlight-current-row
  >
   ……
  </el-table>
  <el-pagination
    layout="prev, pager, next"
    background
    :page-size="pageSize"
    :total="total"
    @current-change="handleCurrentChange"
  >
  </el-pagination>

data里使用到的數(shù)據(jù)

data(){
	return {
		total: 0,
		currentPage: 1,
        pageSize: 50,
	}
}

在這里插入圖片描述

el-table大數(shù)據(jù)量渲染卡頓的一種思路

現(xiàn)需要呈現(xiàn)一個(gè)表格，有近500行，30多列，使用vue+elementUI呈現(xiàn)。

這個(gè)數(shù)據(jù)量不算大，但可能列數(shù)比較多，渲染時(shí)速度很慢，滾動(dòng)會(huì)有卡頓，使用體驗(yàn)不佳。

但并不想做分頁(yè)處理，想要盡可能接近excel的呈現(xiàn)。

思路

假設(shè)全部數(shù)據(jù)為allData(數(shù)組)，現(xiàn)在使用一個(gè)displayData（數(shù)組），displayData = allData.slice(scorll, scorll+ displayCount)，scroll表示當(dāng)前滾動(dòng)到的index， displayCount表示要展示的行數(shù)。把displayData設(shè)為el-table的數(shù)據(jù)源，只渲染該部分?jǐn)?shù)據(jù)。通過(guò)對(duì)表格添加滾動(dòng)事件監(jiān)聽(tīng)，來(lái)動(dòng)態(tài)更新scroll，并且對(duì)scroll添加watch，當(dāng)scroll發(fā)生變化，就自動(dòng)更新displayData。

滾動(dòng)監(jiān)聽(tīng)

監(jiān)聽(tīng)滾動(dòng)需要考慮到兼容性,火狐是DOMMouseScroll，其他的是mousewheel。

?? ??? ??? ?/*指定table的ref*/
? ? ? ? ? ? this.table = this.$refs.mytable.bodyWrapper;
?? ??? ??? ?
?? ??? ??? ?/*瀏覽器兼容*/
? ? ? ? ? ? let userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
? ? ? ? ? ? let ff = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器 ? ? ? ? ?
? ? ? ? ? ? if (ff) {
? ? ? ? ? ? ?this.table.addEventListener('DOMMouseScroll', (event) => {
? ? ? ? ? ? ? ? ? ? let detail = event.detail;
? ? ? ? ? ? ? ? ? ? //滾動(dòng)方向
? ? ? ? ? ? ? ? ? ? let down = detail > 0;
? ? ? ? ? ? ? ? ? ? /**
? ? ? ? ? ? ? ? ? ? 根據(jù)滾動(dòng)方向和距離修改scroll的值，需要注意scroll的范圍不能越界。
? ? ? ? ? ? ? ? ? ? **/
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? }else{
? ? ? ? ? ? ? this.table.addEventListener('mousewheel', (event) => {
? ? ? ? ? ? ? ? ? ? let wheel = event.deltaY;
? ? ? ? ? ? ? ? ? ? //滾動(dòng)方向
? ? ? ? ? ? ? ? ? ? let down = wheel > 0;
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? }