vue table 动态隐藏/显示某列引起的问题

场景描述:
一个tabs标签切换页面下有两个模块, 使用了同一个封装的el-table.
模块一 需要显示 单位 和 总计价格 这两列
模块二 需要对这两列进行隐藏.

 在tabs切换的时候,会记录 tab的角标.   根据角标控制 这两列的显示 和 隐藏

产生的问题:
模块一展示正常, 模块二,在隐藏两列后,表单的展示数据变混乱! 比如商品名称 跑到了单价那一列.

   看了Element 组件文档 后,发现el-table 有一个 doLayout (对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法). 
 
  然后就在切换tab页签 数据更新后 ,调用了该方法,发现不生效.

 最后 找到的解决办法是,给使用到v-if 控制的列 加上 唯一的key值 就能很好的避免混乱

 如:   <el-table-column v-if="isCollect"  key='referenceValueRule' prop="referenceValueRule" label="指标参考值" ></el-table-column>