Vue2 中 v-if / v-else-if + el-table 组件复用坑问题总结

1. 问题背景

vue2项目中，写法如下：

<divv-if="priceType ==='FIXED_PRICE'"><el-table:data="fixedRules"/></div><divv-else-if="priceType ==='RANGE_FIXED_PRICE'"><el-table:data="intervalFixedRules"/></div><divv-else-if="priceType ==='RANGE_MAX_PRICE'"><el-table:data="intervalMaxRules"/></div>

在切换 priceType 时，出现以下异常现象：

1. 表头错乱 / 不刷新
2. 数据显示串表
3. 列结构残留
4. 滚动条异常

数据本身是正确的，但UI显示不正确

2. 问题原因

• 在vue2中，v-if / v-else-if组件复用机制

  • 在vue2中，同一层级下的v-if / v-else-if / v-else 会复用同一个组件实例。

• el-table组件内部维护了大量状态：

  • columns配置缓存。
  • 表头结构
  • 行列计算结果
  • 滚动容器状态
  • 布局测量结果

所以，当DOM结构相似，只是字段含义不同时，vue判断其为‘高度可复用组件’，且el-table内部状态无法自动清理

3. 处理方案

为每个el-talbe设置唯一key

<divv-if="priceType ==='FIXED_PRICE'"><el-table:data="fixedRules"key="FIXED_PRICE"/></div><divv-else-if="priceType ==='RANGE_FIXED_PRICE'"><el-table:data="intervalFixedRules"key="RANGE_FIXED_PRICE"/></div><divv-else-if="priceType ==='RANGE_MAX_PRICE'"><el-table:data="intervalMaxRules"key="RANGE_MAX_PRICE"/></div>

• 说明
  key不同，vue会强制销毁并重建组件，这个时候el-table内部状态会重置，priceType变化时，表格也会显示正常