elementui里的table表格组件大数据渲染严重的性能卡顿问题

elementui里的table表格组件在面对大数据量的时候渲染会出现严重的性能卡顿问题，网上也有很多解决方案，比如什么延迟加载，虚拟加载等等，这里为了避免大家走弯路，直接上终极解决方案大招：趁早换组件、马上换组件、现在就去换组件！！！

在这里推荐的一个可以平替elementUI的table组件的库那就是 umy-ui

关于umy

umy-ui库中的table表格组件,它不造轮子。它改造了element-ui等等库的表格组件。解决大数据表格渲染的核心方法是虚拟表格

用法

安装：

npm install umy-ui

main.js(本文按照全部引入的方式引入的):

import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';Vue.use(UmyUi);

vue文件：

<u-table:header-cell-style="headerStyle" :height="tableHeight":row-height="rowHeight"@selection-change="selectionChange"use-virtual ref="tableRef":data="tableData"><u-table-column label=" " type="index" fixed="left"></u-table-column><u-table-columntype="selection"fixed="left"width="55"></u-table-column><u-table-columnprop="id"label="id"width="100"></u-table-column><u-table-column:label="操作"width="140"fixed="right"><template slot-scope="scope"><span class="spanBtn" @click="view(scope.row)">查看</span></template></u-table-column>
</u-table>data() {return {rowHeight: 60,tableHeight: window.innerHeight - 420,headerStyle: { // 表头样式backgroundColor: "#d9d9d9",fontSize: "14px",fontWeight: 900,color: "#333"},tableData: []}
}

注意点：

• height：是表格的整体高度，不给height或者不给maxheight，又或者给的是0，use-virtual直接会关闭
• use-virtual：是整个表格的核心，添加该属性意味着启动虚拟表格可以解决数据渲染卡顿问题。
• row-height：use-virtual未开启的情况可以不需要，行高(必须要设置行高，如css给td给了80高度，那么你就给row-height给80，不要乱给高度，以td tr高度为准，否则会导致表格计算不正确，row-height不是去为了设置表格行高，它只是为了表格里面计算某些东西。如果你需要改变你的行高，你需要去写css改变td的高度即可！)

出现表格渲染错位的解决办法

watch: {"tableData" (val) {this.$nextTick(() => {//修复表格错位this.$refs.tableRef && this.$refs.tableRef.doLayout()})}},