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>