element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法

更新時(shí)間：2023年02月27日 11:17:30 作者：Apeng_0919

當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁面卡死問題,下面這篇文章主要給大家介紹了關(guān)于element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法,需要的朋友可以參考下

前言

做后臺(tái)項(xiàng)目時(shí)，一次性在表格中加載幾百上千條數(shù)據(jù)，發(fā)現(xiàn)有時(shí)頁面會(huì)崩潰。究其原因，發(fā)現(xiàn)是一次渲染dom太多導(dǎo)致卡頓。

在此嘗試了多種解決方法，發(fā)現(xiàn)最優(yōu)的就是替換組件，elementUI中的表格組件el-table性能不優(yōu)，數(shù)據(jù)量大的時(shí)候，尤其是可操作表格，及其容易卡頓。在這里介紹一個(gè)新的第三方插件:unmy-ui。

官網(wǎng)會(huì)有具體的操作介紹和相關(guān)API http://www.umyui.com/umycomponent/uxGridApi

1.安裝

npm install umy-ui

2.引入

在main.js中寫入以下內(nèi)容：

  import Vue from 'vue';
  import UmyUi from 'umy-ui'
  import 'umy-ui/lib/theme-chalk/index.css';// 引入樣式
  import App from './App.vue';
 
  Vue.use(UmyUi);
 
  new Vue({
    el: '#app',
    render: h => h(App)
  });

3.在需要的頁面寫入表格(僅展示關(guān)鍵代碼，可根據(jù)自己需求添加)

<ux-grid
  border
  keep-source
  ref="plTable"
  show-summary
  :data="form.itemList"
  :edit-config="{ trigger: 'click', mode: 'cell' }"
  max-height="432"
>
  <ux-table-column field="category" title="類別" width="120">
    <template slot-scope="scope">
      <el-select
        size="mini"
        v-model="scope.row.category"
        @change="changeCategory(scope.row.category, scope.rowIndex)"
      >
        <el-option
          v-for="(item, index) in categoryGroup"
          :key="index"
          :value="item.value"
          :label="item.label"
          >{{ item.label }}</el-option
        >
      </el-select>
    </template>
  </ux-table-column>
</ux-grid>

在此解釋我寫項(xiàng)目時(shí)遇到和el-table不同的兩點(diǎn)：

el-table 中綁定數(shù)據(jù)的prop和ux-grid中的field對(duì)應(yīng)，label和title對(duì)應(yīng)；
change事件中傳遞該行的索引，el-table中用scope.$index，在ux-grid中用scope.rowIndex；

最后解決頁面卡頓崩潰的問題。

總結(jié)

到此這篇關(guān)于element table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰解決的文章就介紹到這了,更多相關(guān)element table數(shù)據(jù)量太大網(wǎng)頁卡死內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

關(guān)于axios配置請(qǐng)求頭content-type實(shí)例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請(qǐng)求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下
2022-04-04
Ant Design Pro 之 ProTable使用操作
這篇文章主要介紹了Ant Design Pro 之 ProTable使用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法
今天小編就為大家分享一篇vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下
2023-12-12
vue查找指令和模板思路詳解
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本，隨著思路的展開我們就來實(shí)現(xiàn)這個(gè)功能，需要的朋友可以參考下
2023-10-10
vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動(dòng)內(nèi)容頁面tab的實(shí)現(xiàn)示例,左側(cè)菜單欄與右側(cè)內(nèi)容部分聯(lián)動(dòng),當(dāng)點(diǎn)擊左側(cè)的菜單,右側(cè)會(huì)展示對(duì)應(yīng)的tab,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式
文件上傳是web開發(fā)中一個(gè)常見的需求,Vue.js作為一款流行的前端框架,也提供了方便的方法來實(shí)現(xiàn)文件上傳功能,下面這篇文章主要給大家介紹了關(guān)于基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下
2024-03-03
Vue組件的繼承用法示例詳解
這篇文章主要介紹了Vue組件的繼承用法,本文通過實(shí)例代碼案例講解給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果
最近用vue做了兩個(gè)項(xiàng)目，都需要實(shí)現(xiàn)全選反選的功能，所以想著記錄下分享給大家，方便自己或者有需要的朋友們參考講學(xué)習(xí)，所以下面這篇文章主要介紹了利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果,需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。
2017-01-01