el-table显示数据量大导致页面卡顿问题优化

使用背景

使用el-table，页面显示几百上千条数据的时候十分卡顿。

实现内容

1. 使用umy-ui组件（umy-ui官网），解决数据量大卡顿的问题。

解决方法

1. 安装

npm install umy-ui

2. 引入

<script>
	 import Vue from 'vue';
	 import UmyUi from 'umy-ui'
	 import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
	 import App from './App.vue';
	
	 Vue.use(UmyUi);
	
	 new Vue({
	   el: '#app',
	   render: h => h(App)
	 });
</script>

3. 使用
   增加:row-height=“32” use-virtual属性

 <u-table ref="productionTable" :row-height="32" use-virtual v-loading="table.loading" :data="table.tableData" show-body-overflow="tooltip" highlight-current-row height="480" @selection-change="handleSelectionChange">
	<u-table-column type="selection" width="44" align="center" fixed></u-table-column>
	<u-table-column label="代号" prop="11111" align="left" min-width="120px" show-overflow-tooltip>
		<template slot-scope="scope">
			<span>{{ scope.row.11111|| '-' }}</span>
		</template>
	</u-table-column>
</u-table>