将较大的数组赋值<el-table></el-table>时,会导致页面卡顿,甚至崩溃
遇到的问题:将长度为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);
- 将el-table换为u-table
- 将el-table-column换为u-table-column
- 给el-table加属性height,给一个固定高可以解决卡顿问题
- 再加一个use-virtual属性,虚拟dom
现在添加3000条数据也不会导致页面卡顿,大爱 umy-ui 插件,我时间看看官网。