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

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

首先第一步

 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缓存之后悉数封闭时还是会有卡顿

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