一、问题根源分析
当 el-table-column
使用 v-if
动态控制显隐时,Vue 的虚拟 DOM 复用机制会导致以下问题:
- DOM 复用混乱:Vue 会尝试复用相同类型的组件实例,导致列内容错位(如 A 列数据渲染到 B 列)
- 状态保留异常:输入框等交互组件的状态可能被意外保留到其他列
- 条件切换抖动:频繁切换显隐时可能出现布局闪动
二、解决方案: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