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)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁加載效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實(shí)例
這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結(jié)合實(shí)例形式分析了vue基于axios庫post傳送表單json格式數(shù)據(jù)相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2023-06-06
defineProperty和Proxy基礎(chǔ)功能及性能對(duì)比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對(duì)比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
雖然前端UI框架大都提供文件上傳的組件，以及很多插件可供選擇，工作中可能不需要我們手寫一個(gè)上傳組件，但是從零封裝組件對(duì)學(xué)習(xí)是很有助益的。下文為大家介紹使用Vue3+TypeScript實(shí)現(xiàn)的一個(gè)文件上傳的功能，目前只實(shí)現(xiàn)上傳等基本功能，后續(xù)會(huì)逐漸對(duì)功能進(jìn)行擴(kuò)展2021-05-05
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue封裝一個(gè)右鍵菜單組件詳解(復(fù)制粘貼即可使用)
關(guān)于vue項(xiàng)目中會(huì)出現(xiàn)一些需求,就是右鍵菜單項(xiàng)的功能實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue封裝一個(gè)右鍵菜單組件(復(fù)制粘貼即可使用)的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤
這篇文章主要介紹了vue+css如何實(shí)現(xiàn)圓環(huán)漸變儀表盤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了簡(jiǎn)單了解vue.js數(shù)組的常用操作,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
這篇文章主要給大家介紹了關(guān)于Vue-CLI多頁分目錄打包的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04