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 时，出现以下异常现象：
- 表头错乱 / 不刷新
- 数据显示串表
- 列结构残留
- 滚动条异常
数据本身是正确的，但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变化时，表格也会显示正常
