element table数据量太大导致网页卡死崩溃的解决办法
短信预约 -IT技能 免费直播动态提醒
前言
做后台项目时，一次性在表格中加载几百上千条数据，发现有时页面会崩溃。究其原因，发现是一次渲染dom太多导致卡顿。
在此尝试了多种解决方法，发现最优的就是替换组件，elementUI中的表格组件el-table性能不优，数据量大的时候，尤其是可操作表格，及其容易卡顿。在这里介绍一个新的第三方插件:unmy-ui。
官网会有具体的操作介绍和相关API http://www.umyui.com/umycomponent/uxGridApi
1.安装
npm install umy-ui2.引入
在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)
});3.在需要的页面写入表格(仅展示关键代码，可根据自己需求添加)
<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数据量太大网页卡死内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
