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

发布于 2022-09-06 10:30:00 字数 1655 浏览 7 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

别挽留 2022-09-13 10:30:01

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

顾铮苏瑾 2022-09-13 10:30:01

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

我是男神闪亮亮 2022-09-13 10:30:01

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

疯狂的代价 2022-09-13 10:30:01

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文