后台管理系统的某个页面需要展示多个列表 数据量过多 页面渲染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
}<el-table>标签上加三个属性 :row-height="rowHeight" :height="tableHeight" use-virtual
然后将所有<el-table 替换为 <u-table
<el-table-column 替换为 <u-table-column
</el-table-column> 替换为 </u-table-column>
data里给默认值
data() {return {rowHeight: 55,tableHeight: 500}
}
这里需要注意 height是必须给的 否则虚拟滚动会失效
另外还有个vxe-table 更厉害！
官网：Vxe Table v4
企业版的能像excel那样复制粘贴还能渲染图表
