制作网站题材万能识图

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>