将较大的数组赋值<el-table></el-table>时,会导致页面卡顿,甚至崩溃

  • 将较大的数组赋值<el-table></el-table>时,会导致页面卡顿,甚至崩溃已关闭评论
  • 74 次浏览
  • A+
所属分类:Web前端
摘要

遇到的问题:将长度为40的数组数据赋值<el-table></el-table>,我发现loading没有效果,后面发现是页面卡住了,loading直接没有出现。

遇到的问题:将长度为40的数组数据赋值<el-table></el-table>,我发现loading没有效果,后面发现是页面卡住了,loading直接没有出现。

经过查询资料,发现<el-table>会有卡顿的问题,看到有的博主推荐使用一款叫umy-ui的插件,我就试了试,发现卡顿的问题解决了。

官网:http://www.umyui.com/umycomponent/installation

安装:npm i umy-ui

全局注册:

import UmyUi from 'umy-ui' import 'umy-ui/lib/theme-chalk/index.css';// 引入样式 import App from './App.vue';  Vue.use(UmyUi);      

  1. 将el-table换为u-table
  2. 将el-table-column换为u-table-column
  3. 给el-table加属性height,给一个固定高可以解决卡顿问题
  4. 再加一个use-virtual属性,虚拟dom

现在添加3000条数据也不会导致页面卡顿,大爱 umy-ui 插件,我时间看看官网。