vue element tab切换两个表格，第一次点切换进来，表格渲染会闪一下，这是什么原因？

Question

vue element tab切换两个表格，第一次点切换进来，表格渲染会闪一下

      <el-tabs v-model="activeName">
            <el-tab-pane label="实物" name="first">
                <!--实物表格-->
                <el-table :data="tableData1" border style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
                    <el-table-column prop="ordergoods" label="活动订单商品" align="center"></el-table-column>
                    <el-table-column prop="consignee" label="收货人信息"></el-table-column>
                    <el-table-column prop="buyeraccount" label="下单人账号" width="150" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="虚拟" name="second">
                <!--虚拟表格-->
                <el-table :data="tableData2" border style="width: 100%" ref="multipleTable" >
                    <el-table-column prop="virtualOrderGoods" label="活动订单商品" align="center"></el-table-column>
                    <el-table-column prop="activationCode" label="激活码" align="center"></el-table-column>
                    <el-table-column prop="validityTerm" label="有效期" align="center"></el-table-column>
                    <el-table-column prop="buyerAccount" label="下单人账号" align="center"></el-table-column>
                    <el-table-column prop="state" label="状态" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

之后再点击切换就是正常的，刷新页面第一次进来的时候会闪

Answer 1

使用v-if控制el-tab-pane里的内容是可以的，亲测有效
例如v-if="activeName === 'second'"
例子详见
https://jsfiddle.net/athena03...

Answer 2

因为渲染数据不及时，数据加载因网络还没有加载，加载完成后就会跳，这是VUE的特性，给盒子加上v-cloak，这是防止 闪烁

Answer 3

处理方法两个：
1、v-cloak配合css来使用
2、用template标签包裹tabs的代码

Answer 4

你用的element-ui 是哪个版本的