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

最后

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

相关推荐
Nan_Shu_6141 小时前
Web前端面试题(2)
前端
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5203 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20503 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端3 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿3 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉3 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~3 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js