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

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

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

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

首先第一步

js 复制代码
 npm install umy-ui

或者使用CDN的方式引入

js 复制代码
  <!--引入表格样式-->
  <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中全局引入

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

或按需引入

js 复制代码
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 这样就可以使用了

示例

js 复制代码
<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 的模板,希望有大佬指点一二

最后

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

相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端