场景描述:
一个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>
