温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

element table数据量太大导致网页卡死崩溃如何解决

发布时间:2023-02-27 14:14:13 来源:亿速云 阅读:313 作者:iii 栏目:开发技术

这篇文章主要讲解了“element table数据量太大导致网页卡死崩溃如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“element table数据量太大导致网页卡死崩溃如何解决”吧!

前言

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

element table数据量太大导致网页卡死崩溃如何解决

在此尝试了多种解决方法,发现最优的就是替换组件,elementUI中的表格组件el-table性能不优,数据量大的时候,尤其是可操作表格,及其容易卡顿。

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;

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

感谢各位的阅读,以上就是“element table数据量太大导致网页卡死崩溃如何解决”的内容了,经过本文的学习后,相信大家对element table数据量太大导致网页卡死崩溃如何解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI