这篇文章主要讲解了“element table数据量太大导致网页卡死崩溃如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“element table数据量太大导致网页卡死崩溃如何解决”吧！
做后台项目时，一次性在表格中加载几百上千条数据，发现有时页面会崩溃。究其原因，发现是一次渲染dom太多导致卡顿。
在此尝试了多种解决方法，发现最优的就是替换组件，elementUI中的表格组件el-table性能不优，数据量大的时候，尤其是可操作表格，及其容易卡顿。
npm install umy-ui
在main.js中写入以下内容：
计算
安全
数据库
网络和加速
企业服务
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)
});<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 中绑定数据的prop和ux-grid中的field对应，label和title对应；
change事件中传递该行的索引，el-table中用scope.$index，在ux-grid中用scope.rowIndex；
最后解决页面卡顿崩溃的问题。
感谢各位的阅读，以上就是“element table数据量太大导致网页卡死崩溃如何解决”的内容了，经过本文的学习后，相信大家对element table数据量太大导致网页卡死崩溃如何解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
