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

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

问题背景

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

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

已尝试的解决方案

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

最终解决方案

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

html 复制代码

<!-- 动态列表格（数据获取后显示） -->
<el-table 
  v-if="ratioList?.length"
  class="table-class"
  height="100%"
  :data="formRatio.associationList">
  
  <!-- 固定列 -->
  <el-table-column
    label="清单单价（元）"
    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-input
        type="number"
        v-model="scope.row[item.processId]"
        @input="stageRateChg(scope.row, item)"
        :controls="false"
        style="width: 100%" />
    </template>
  </el-table-column>
</el-table>

<!-- 静态表格（数据没获取到时显示） -->
<el-table
  v-else
  class="table-class"
  height="100%"
  :data="formRatio.associationList">
  
  <!-- 仅固定列 -->
  <el-table-column
    label="清单单价（元）"
    prop="associationContPrice"
    align="center" />
</el-table>