場景描述:
一個tabs標(biāo)簽切換頁面下有兩個模塊, 使用了同一個封裝的el-table.
模塊一 需要顯示 單位 和 總計價格 這兩列
模塊二 需要對這兩列進行隱藏.
在tabs切換的時候,會記錄 tab的角標(biāo). 根據(jù)角標(biāo)控制 這兩列的顯示 和 隱藏
產(chǎn)生的問題:
模塊一展示正常, 模塊二,在隱藏兩列后,表單的展示數(shù)據(jù)變混亂! 比如商品名稱 跑到了單價那一列.
看了Element 組件文檔 后,發(fā)現(xiàn)el-table 有一個 doLayout (對 Table 進行重新布局靶端。當(dāng) Table 或其祖先元素由隱藏切換為顯示時弊攘,可能需要調(diào)用此方法).
然后就在切換tab頁簽 數(shù)據(jù)更新后 ,調(diào)用了該方法,發(fā)現(xiàn)不生效.
最后 找到的解決辦法是,給使用到v-if 控制的列 加上 唯一的key值 就能很好的避免混亂
如: <el-table-column v-if="isCollect" key='referenceValueRule' prop="referenceValueRule" label="指標(biāo)參考值" ></el-table-column>