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

AaronYuan
  • 1.5k

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>

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

回复
阅读 16.6k
4 个回答
✓ 已被采纳

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏