element ui 中表格数据大时页面卡顿，出现白屏问题解决

使用umyui 插件

umyui文档地址

<u-table
  use-virtual
     show-body-overflow="title"
     show-header-overflow="title"
     :data="tableData"
     :span-method="arraySpanMethod"
     :cell-class-name="tableRowClassName"
     border
     style="width: 100%"
     :max-height="tableHeight"
     :row-height="28"
     :excess-rows="8"
   >
     <template v-for="(column, index) in tableColunms">
       <u-table-column
         :key="String(new Date())+ index"
         :prop="column.columnName"
         :auto-fit="true"
         fit-by-class="auto-fit-target"
         :width="column.columnWidth"
         :fit-header="true"
         :fit-gap="10"
         :align="column.align?column.align:'left'"
         :label="(column.columnNameShow||column.columnNameShow==='')?column.columnNameShow:column.columnName==='special'?'':$marchFieldName(column.labelName?column.labelName:column.columnName).newFieldName"
       >
         <template slot-scope="scope">
           <el-input
             v-if="(((editTarget===1&&scope.row['special']==='补货量'))||(editTarget===2&&scope.row['special']==='补货后预计库存'&&scope.row['k_s']!=='款累计'))&&column.columnName!=='zj'&&column.columnName!=='special'&&column.columnName!=='k_s'&&column.columnName!=='base_store_name_in'&&column.columnName!=='base_store_in_rank'&&column.columnName!=='base_store_in_type'&&column.columnName!=='kxsz'&&scope.row[column.columnName]!==undefined&&scope.row[column.columnName]!==null"
             v-model="scope.row[column.columnName]"
             :class="column.align === 'right' || isNUmber(scope.row[column.columnName])?'text-right':''"
             @blur="changeFun(scope.row[column.columnName],column.columnName,scope,$event,)"
             @input="scope.row[column.columnName]=$onlyNumber(scope.row[column.columnName],true,true)"
           />
           <div v-else style="width: 100%">
             {{ scope.row[column.columnName] }}
           </div>
         </template>

       </u-table-column>
     </template>
   </u-table>

.plTableBox .el-table th {
  height: 36px;
  font-size: 12px;
  background: #f5f7fa;
}

.plTableBox .el-table td {
  height: 28px!important;
  font-size: 12px;
}

use-virtual ： 是否开启虚拟滚动 (解决大数据渲染卡顿问题)
row-height ：use-virtual 开启后必须设置 row-height。（表格中td设置的高度是多少，row-height就是多少，不可以乱设置）

如果表格中有合并行列。滚动时候表格中可能出现缺失部分，需要设置：:excess-rows=“16”，具体设置多少看合并了几行。如下图：合并了8行，那么:excess-rows=“16” 就好。
excess-rows：可视区域上方和下方额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能