element table数据量太大导致网页卡死崩溃的解决办法

更新时间：2023年02月27日 11:17:30 作者：Apeng_0919

当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下

前言

做后台项目时，一次性在表格中加载几百上千条数据，发现有时页面会崩溃。究其原因，发现是一次渲染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；

最后解决页面卡顿崩溃的问题。

总结

到此这篇关于element table数据量太大导致网页卡死崩溃解决的文章就介绍到这了,更多相关element table数据量太大网页卡死内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue elementUI表单嵌套表格并对每行进行校验详解
element-ui中有详细的各种表格及表格方法,下面这篇文章主要给大家介绍了关于Vue elementUI表单嵌套表格并对每行进行校验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
Vue实现添加数据到二维数组并显示
这篇文章主要介绍了Vue实现添加数据到二维数组并显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
玩转vue的slot内容分发
这篇文章主要介绍了玩转vue的slot内容分发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
利用vue+turn.js实现翻书效果完整实例
这篇文章主要给大家介绍了关于利用vue+turn.js实现翻书效果的相关资料,turn.js是使用了jquery书写的,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-01-01
vue-cli webpack 引入jquery的方法
小编使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具体内容详情大家参考下本文
2018-01-01
vueJs实现DOM加载完之后自动下拉到底部的实例代码
这篇文章主要介绍了vueJs实现DOM加载完成之后自动下拉到底部的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-08-08
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
这篇文章主要介绍了深入理解与使用keep-alive(配合router-view缓存整个路由页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue3中使用v-model实现父子组件数据同步的三种方案
这篇文章主要介绍了vue3中使用v-model实现父子组件数据同步的三种方案,如果只有一个匿名v-model的传递的话,可以使用vue3.3新添加的编译宏,defineModel来使用,每种方案结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-10-10
Vue中Video标签播放解析后短视频去水印无响应解决
这篇文章主要为大家介绍了Vue中使用Video标签播放＜解析后的短视频＞去水印视频无响应的解决方式，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
Vue全局监测错误并生成错误日志实现方法介绍
在做完一个项目后，之后的维护尤为重要。这时，如果项目配置了错误日志记录，这样能大大减少维护难度。虽然不一定能捕获到全部的错误，但是一般的错误还是可以监测到的。这样就不用测试人员去一遍一遍复现bug了
2022-10-10