el-table表格大数据卡顿？试试umy-ui

最近公司项目表格数据量过大导致页面加载时间非常长，而且还使用了keep-alive缓存，关闭页面时需要卸载大量dom，导致页面卡死、cpu飙到100%的问题

后来在网上查找了很多方法，发现了umy-ui（目前只支持v2）,这个表格库是针对element-ui的表格做了二次优化，支持el-table的所有方法

这个表格可以基于可视区域做dom渲染，这样就大大的减少了页面初次渲染的压力。

首先第一步

 npm install umy-ui

或者使用CDN的方式引入

  <!--引入表格样式-->
<link rel="stylesheet" href="https://unpkg.com/umy-ui/lib/theme-chalk/index.css">

<!-- import Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/umy-ui/lib/index.js"></script>
<!-- 真实项目不建议你直接引入  <script src="https://unpkg.com/umy-ui/lib/index.js"></script>-->

<!-- 这样去引如会直接下最新版本，如果你的项目打包发布了，然后遇见umy-ui大更新 你可能项目会报错。-->

<!--推荐你这样引入： https://unpkg.com/umy-ui$1.0.1/lib/index.js   加入版本号！-->
<!-- 这样去引如会直接下最新版本，如果你的项目打包发布了，然后遇见umy-ui大更新 你可能项目会报错。-->

<!--推荐你这样引入： https://unpkg.com/umy-ui@1.0.1/lib/index.js   加入版本号！-->

第二步 main.js中全局引入

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

或按需引入

import { UTable, UTableColumn } from 'umy-ui';

Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);

修改起来也很方便
直接吧 el-table 改成 u-table, el-table-column改成u-table-column，最后添加属性use-virtual这样就可以使用了

示例

<u-table

   ref="tableRef"

   :data="tableData"

   style="width: 100%"

   border

   row-key="id"

   height="tableHeight"

   use-virtual // 开启虚拟滚动

   row-height="55" // 行高

>
<u-table-column
prop="id"
label="name"

   >

      ...
</u-table-column>

</u-table>

其中的u-table是基础虚拟表格，u-grid是解决冲向列多卡顿的问题、或单元格合并。(这里注意u-grid的没有prop字段！！而是field)

具体详细属性请看umy-ui官网

问题

用完这个表格页面性能虽然提升不少但是当我开启多个keep-alive缓存之后全部关闭时还是会有卡顿

目前用的是 vue-element-admin 的模板，希望有大佬指点一二

最后

如果文章有帮助到你，帮作者点个赞就好啦