element ui中的table表格组件在大量数据渲染的时候渲染会出现严重的卡顿问题,虽然网上也有很多解决方案,比如什么延迟加载,虚拟加载等等,这里为了避免走弯路,直接上终极解决方案大招:趁早换组件、马上换组件、现在就去换组件!!!
推荐组件:umy-ui
官方文档:umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库,完美解决表格万级数据渲染卡顿问题里面有各种表格格式,可满足列过多、行过多等多种大数据情况优化的表格方案
用法
1、安装
npm install umy-ui
2、main.js(本文按照全部引入的方式引入的):
import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';
Vue.use(UmyUi);
3、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-column
type="selection"
fixed="left"
width="55">
</u-table-column>
<u-table-column
prop="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() }) } },