Vue3 + Element-Plus 动态表格避坑指南:三步根治 v-if 列显隐导致的数据错乱

一、问题根源分析

el-table-column 使用 v-if 动态控制显隐时,Vue 的虚拟 DOM 复用机制会导致以下问题:

  1. DOM 复用混乱:Vue 会尝试复用相同类型的组件实例,导致列内容错位(如 A 列数据渲染到 B 列)
  2. 状态保留异常:输入框等交互组件的状态可能被意外保留到其他列
  3. 条件切换抖动:频繁切换显隐时可能出现布局闪动

二、解决方案:Key 标识法

1. 核心修复逻辑

在所有带 v-if 的列中添加 唯一且稳定的 key,强制 Vue 重新创建组件实例:

<!-- 修改前(未加 key 的列) -->
<el-table-column 
  prop="DOSAGECOUNT" 
  v-if="radioDrug !== '中药'" 
  label="数量">
</el-table-column>

<!-- 修改后(添加唯一 key) -->
<el-table-column 
  prop="DOSAGECOUNT" 
  v-if="radioDrug !== '中药'" 
  :key="'DOSAGECOUNT-' + radioDrug