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

长沙高校网站制作公司网站优化设计公司

wzjs 2025/8/22 12:58:38

长沙高校网站制作公司,网站优化设计公司,简易网页设计代码,建筑人才网app下载el-table动态列渲染导致标题高度异常问题解决方案问题背景在基于 Element UI 的表格组件开发中，当遇到以下场景时会出现标题栏高度异常闪动： 包含固定列和动态渲染列动态列数据通过接口异步获取数据初始化后动态赋值渲染已尝试的解决方案方案类型实…

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>