Vue Element UI el-table 樣式屬性重疊發生錯位

問題的應用場景發生在一個頁面 多個table，用v-if 來控制不同的 Table 顯示和隱藏, 第一個表格的ref="multipleTable"  選框屬性會重疊疊加到另一個沒有選框的表格上, 本來以為是diff 算法的問題，最后經過各種測試發現不是,沒有查看element 的源碼 推測應該是 elementUI  官方的業務邏輯不夠嚴謹導致的 - -

 

 

官方文檔中的 this.$refs.table.doLayout(); //ref="table" 沒有任何作用

​

 

 

問題代碼

 <el-table     v-if="demo==true" 
                              v-loading="loading"
                              :data="tableData"
                              //選框屬性
                              ref="multipleTable"
                              @selection-change="handleSelectionChange"
                              stripe
                              style="width: 100%" >


</el-table>


<!--第一個的ref="multipleTable" 會重疊到第二個table 上-->
 <el-table     v-if="demo==false"  
                              v-loading="loading"
                              :data="tableData"
                             
                              @selection-change="handleSelectionChange"
                              stripe
                              style="width: 100%" >


</el-table>

 

 

解決方案 

用style來控制,就可以避開渲染時候的不嚴謹邏輯了

 

 <el-table  :style="{'display':bool?'block':'none'}"
                              v-loading="loading"
                              :data="tableData"
                              //選框屬性
                              ref="multipleTable"
                              @selection-change="handleSelectionChange"
                              stripe
                              style="width: 100%" >


</el-table>



 <el-table   :style="{'display':bool?'block':'none'}"
                              v-loading="loading"
                              :data="tableData"
                             
                              @selection-change="handleSelectionChange"
                              stripe
                              style="width: 100%" >


</el-table>