当前位置：首页 > news >正文

关于el-table异步获取数据渲染动态列数据赋值列数据渲染时title高度异常闪过问题

news 2025/7/18 5:40:54

el-table动态列渲染导致标题高度异常问题解决方案

问题背景

在基于 Element UI 的表格组件开发中，当遇到以下场景时会出现标题栏高度异常闪动：

包含 固定列 和 动态渲染列
动态列数据通过接口异步获取
数据初始化后动态赋值渲染

已尝试的解决方案

方案类型	实现方式	效果
Key 强制刷新	`:key="updateKey"`	无效
延迟渲染	`$nextTick`	表格布局错乱
条件渲染	`v-if="dataReady"`	闪烁仍然存在
缓存策略	`<keep-alive>`	无改善
显隐控制	`v-show`	高度计算失效
加载遮罩	`loading=true`	治标不治本

最终解决方案

采用 双表格切换模式 实现稳定渲染：

<!-- 动态列表格（数据获取后显示） -->
<el-table v-if="ratioList?.length"class="table-class"height="100%":data="formRatio.associationList"><!-- 固定列 --><el-table-columnlabel="清单单价（元）"prop="associationContPrice"align="center" /><!-- 动态渲染列 --><el-table-column v-for="item in ratioList":key="item.processId":label="`${item.processName}计量比例（%）`":prop="item.stageRate"align="center"><template #default="scope"><el-inputtype="number"v-model="scope.row[item.processId]"@input="stageRateChg(scope.row, item)":controls="false"style="width: 100%" /></template></el-table-column>
</el-table><!-- 静态表格（数据没获取到时显示） -->
<el-tablev-elseclass="table-class"height="100%":data="formRatio.associationList"><!-- 仅固定列 --><el-table-columnlabel="清单单价（元）"prop="associationContPrice"align="center" />
</el-table>