解决el-table表格数据量过大导致页面卡顿问题 又名《umy-ui---虚拟表格仅渲染可视区域dom的神》_umyui官网

后台管理系统的某个页面需要展示多个列表 数据量过多 页面渲染dom卡顿

经调研发现两个组件 pl-table和umy-ui （也就是u-table）

最终决定使用umy-ui 它是专门基于 Vue 2.0 的桌面端组件库 流畅渲染表格万级数据

而且他是对element-ui的表格做了二次优化 可以支持el-table的所有方法

官网：http://www.umyui.com/

npm 安装

npm install umy-ui

全局引入 main.js里

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

或者按需引入(例如只引入表格部分组件)

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

component里注册

component { UTable, UTableColumn}

标签上加三个属性  :row-height=\"rowHeight\"  :height=\"tableHeight\" use-virtual

然后将所有<el-table 替换为 <u-table
<el-table-column  替换为 <u-table-column
 替换为

data里给默认值

data() { return { rowHeight: 55, tableHeight: 500 }}

这里需要注意 height是必须给的 否则虚拟滚动会失效

另外还有个vxe-table 更厉害！

官网：Vxe Table v4

企业版的能像excel那样复制粘贴还能渲染图表