526互联

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

发布时间 2023-11-17 11:07:37作者: zhaxiaobing

遇到的问题：将长度为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 插件，我时间看看官网。