vue element tab切换两个表格,第一次点切换进来,表格渲染会闪一下,这是什么原因?
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>
之后再点击切换就是正常的,刷新页面第一次进来的时候会闪
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
使用
v-if
控制el-tab-pane
里的内容是可以的,亲测有效例如
v-if="activeName === 'second'"
例子详见
https://jsfiddle.net/athena03...
因为渲染数据不及时,数据加载因网络还没有加载,加载完成后就会跳,这是VUE的特性,给盒子加上v-cloak,这是防止 闪烁
处理方法两个:
1、v-cloak配合css来使用
2、用template标签包裹tabs的代码
你用的element-ui 是哪个版本的