element table数据量太大导致网页卡死崩溃
2023-03-31 10:39:53 时间
做后台项目时,一次性在表格中加载几百上千条数据,发现有时页面会崩溃。究其原因,发现是一次渲染dom太多导致卡顿。
在此尝试了多种解决方法,发现最优的就是替换组件,elementUI中的表格组件el-table性能不优,数据量大的时候,尤其是可操作表格,及其容易卡顿。在这里介绍一个新的第三方插件:unmy-ui。
官网会有具体的操作介绍和相关API http://www.umyui.com/umycomponent/uxGridApi
1.安装
npm install umy-ui
2.引入
在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;
最后解决页面卡顿崩溃的问题。
如有问题,欢迎指正!!!
相关文章
- 从本体论开始说起——运营商关系图谱的构建及应用
- 如何成为一名数据科学家?
- 从未见过的堂兄杀了人,你的DNA是关键证据
- 20个安全可靠的免费数据源,各领域数据任你挑
- 20个安全可靠的免费数据源,各领域数据任你挑
- 阿里云李飞飞:All in Cloud时代,云原生数据库优势明显
- 基于Hadoop生态系统的一高性能数据存储格式CarbonData(性能篇)
- 大数据告诉你:10年漫威,到底有多少角色
- TigerGraph:实时图数据库助力金融风控升级
- Splunk利用Splunk Connected Experiences和Splunk Business Flow 扩大数据访问
- 大数据开发常见的9种数据分析手段
- 以免在景区看人,我爬了5W条全国景点门票数据...
- 【实战解析】基于HBase的大数据存储在京东的应用场景
- 数据科学家告诉你哪些计算机科学书籍是你应该看的
- Kafka作为大数据的核心技术,你了解多少?
- Spring Boot 整合 Redis 实现缓存操作
- 大数据学习必须掌握的五大核心技术有哪些?
- 基于Antlr在Apache Flink中实现监控规则DSL化的探索实践
- 甲骨文再次被Gartner评为分析型数据管理解决方案魔力象限领导者
- 爬取吴亦凡微博102118条转发数据,扒一扒流量的真假