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

這篇文章主要講解了“element table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰如何解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“element table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰如何解決”吧！

前言

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

在此嘗試了多種解決方法，發(fā)現(xiàn)最優(yōu)的就是替換組件，elementUI中的表格組件el-table性能不優(yōu)，數(shù)據(jù)量大的時候，尤其是可操作表格，及其容易卡頓。

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>

在此解釋我寫項目時遇到和el-table不同的兩點：

• el-table 中綁定數(shù)據(jù)的prop和ux-grid中的field對應(yīng)，label和title對應(yīng)；

• change事件中傳遞該行的索引，el-table中用scope.$index，在ux-grid中用scope.rowIndex；

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

感謝各位的閱讀，以上就是“element table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰如何解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對element table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰如何解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！