element table数据量太大导致网页卡死崩溃

这篇具有很好参考价值的文章主要介绍了element table数据量太大导致网页卡死崩溃。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

做后台项目时,一次性在表格中加载几百上千条数据,发现有时页面会崩溃。究其原因,发现是一次渲染dom太多导致卡顿。

element table数据量太大导致网页卡死崩溃

在此尝试了多种解决方法,发现最优的就是替换组件,elementUI中的表格组件el-table性能不优,数据量大的时候,尤其是可操作表格,及其容易卡顿。在这里介绍一个新的第三方插件:unmy-ui。

官网会有具体的操作介绍和相关API http://www.umyui.com/umycomponent/uxGridApi

element table数据量太大导致网页卡死崩溃

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;

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

如有问题,欢迎指正!!!文章来源地址https://www.toymoban.com/news/detail-426044.html

到了这里,关于element table数据量太大导致网页卡死崩溃的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 服务器数据恢复-EVA存储磁盘故障导致存储崩溃的数据恢复案例

    EVA系列存储是一款以虚拟化存储为实现目的的中高端存储设备。EVA存储中的数据在EVA存储设备工作过程中会不断进行迁移,如果运行的任务比较复杂,EVA存储磁盘负载加重,很容易出现故障的。EVA存储通过大量磁盘的冗余空间和故障后rss冗余磁盘动态迁移来保护存储中的数据

    2024年02月11日
    浏览(49)
  • 记录一个iOS UITableView 正在刷新的时候修改数据源导致的崩溃

    首先看一下崩溃堆栈信息 由于tableview 调用layoutsubViews 执行到代理方法 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 由于是崩溃在系统方法里面的,我们无法直接看到是因为调用哪个方法导致的崩溃 后来经过多次调试,发现是因为调用了reloadData 出

    2024年01月17日
    浏览(57)
  • raid5两块磁盘掉线导致阵列崩溃的服务器数据恢复案例

    服务器数据恢复环境: DELL PowerVault系列某型号存储,15块硬盘搭建了一组RAID5磁盘阵列。   服务器故障检测: 存储设备raid5阵列中一块磁盘由于未知原因离线,管理员对该磁盘阵列进行了同步操作。在同步的过程中又有一块磁盘指示灯报警,磁盘离线,磁盘阵列同步失败,

    2024年02月13日
    浏览(60)
  • 服务器数据恢复-RAID5多块磁盘离线导致崩溃的数据恢复案例

    服务器数据恢复环境: DELL POWEREDGE某型号服务器中有一组由6块SCSI硬盘组建的RAID5阵列,LINUX REDHAT操作系统,EXT3文件系统,存放图片文件。   服务器故障分析: 服务器raid5阵列中有一块硬盘离线,管理员没有及时发现,直到服务器raid5阵列中的另一块硬盘掉线,raid5阵列瘫痪,

    2024年02月12日
    浏览(66)
  • 热备盘激活失败导致raid5阵列崩溃的服务器数据恢复案例

    服务器数据恢复环境: 一台Linux Redhat操作系统服务器上有一组由5块硬盘组建的raid5阵列,包含一块热备盘。上层部署一个OA系统和Oracle数据库。 服务器故障: raid5阵列中的1块磁盘离线,硬盘离线却没有激活热备盘,直到另外一块磁盘离线导致阵列崩溃。 用户要求恢复raid5的

    2024年02月15日
    浏览(64)
  • 【北亚企安数据恢复】RAIDZ多块磁盘离线导致服务器崩溃的数据恢复案例

    服务器数据恢复环境: ORACLE SUN ZFS某型号存储,共40块磁盘组建存储池,其中的36块磁盘分为三组,每组12块,单个组使用ZFS特有的RAIDZ管理所有磁盘,RAIDZ级别为2;另外的4块磁盘作为全局热备。存储池内划分出若干空间映射到服务器使用。 服务器故障: 服务器正常运行过程

    2024年01月18日
    浏览(57)
  • 服务器数据恢复—raid5热备盘未激活崩溃导致上层oracle数据丢失的数据恢复案例

    服务器数据恢复环境: 某品牌X系列服务器,4块SAS硬盘组建了一组RAID5阵列,还有1块磁盘作为热备盘使用。服务器上层安装的linux操作系统,操作系统上部署了一个基于oracle数据库的OA(oracle已经不再为该OA系统提供后续服务支持)。 服务器故障: raid5中一块磁盘离线,热备盘

    2024年02月05日
    浏览(61)
  • git克隆仓库太大导致报错失败

    公司git仓库非常大导致clone不下来(https),每次临近结束的时候就会报错: 后更换为ssh方式也clone失败,后来实在没办法,就想着能否用一个分支clone一个分支。这么做的优点是只clone一个分支,速度快。缺点是,不能切换分支,要使用某个分支的时候,只能按照这个方法重新把

    2024年02月12日
    浏览(42)
  • Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色,el-table 组件去除鼠标悬停在表格行的 hover 高亮效果(完美解决表格合并后导致行错位)

    网上都是老文章了,本文提供的方案 100% 解决此问题。 本文 实现了在 vue3 + element plus 项目开发中,表格组件 el-table 鼠标移入时隐藏 hover 悬停高亮效果,当鼠标滑动到表格行时不要任何效果! 同时也解决了 “表格合并” 后带来的 hover 错位、异常显示等。 如下图所示,当鼠

    2024年02月21日
    浏览(68)
  • 解决时间差太大导致Windows无法同步时间

    按微软文档进入注册表修改: HKEY_LOCAL_MACHINESYSTEMCurrentControlSetServicesW32TimeConfig MaxPosPhaseCorrection和MaxNegPhaseCorrection为:0xffffffff (8个F) 但是发现W32TimeConfig里面是空的,而且无法创建 查看config目录权限,发现权限丢失,重新继承权限后修改成功。 另外设置同步时间间隔

    2024年02月16日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包