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

2022-02-24 12:05:02

使用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:可视区域上方和下方额外渲染的行数,行数越多表格接替渲染效果越好,但越耗性能

在这里插入图片描述

  • 作者:suzyCai
  • 原文链接:https://blog.csdn.net/weixin_42080477/article/details/109283717
    更新时间:2022-02-24 12:05:02