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