问题的应用场景发生在一个页面 多个table，用v-if 来控制不同的 Table 显示和隐藏, 第一个表格的ref="multipleTable" 选框属性会重叠叠加到另一个没有选框的表格上, 本来以为是diff 算法的问题，最后经过各种测试发现不是,没有查看element 的源码 推测应该是 elementUI 官方的业务逻辑不够严谨导致的 - -

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

在这里插入图片描述 image.gif

​

问题代码

 <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>

image.gif

解决方案

用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>

image.gif