vue的element中的el-tabs中使用FullCalendar加载异常的问题,延迟渲染el-tab-pane标签

本文介绍了在Vue项目中,使用element的el-dialog、el-tabs和FullCalendar组件时遇到的加载异常问题。问题出现在el-tabs切换时,FullCalendar无法正常显示。经过分析,原因是el-tabs加载速度较快,导致FullCalendar未完成渲染。解决方案是利用el-tab-pane的lazy属性,设置为true实现延迟加载,确保FullCalendar在el-tab-pane加载前完成渲染。
摘要由CSDN通过智能技术生成

vue的element中的el-tabs中使用FullCalendar加载异常的问题,延迟渲染el-tab-pane标签

一、问题描述

最近的项目有这样一个需求,引用一个日历组件,我用的方案是element的el-dialog+el-tabs+FullCalendar,但是遇到了一个问题,FullCalendar引用的没有任何问题,在正常的页面中可以正常使用,唯独在el-tabs标签中切换的时候,不能正常显示。如下图所示
在这里插入图片描述

二、分析原因

自己琢磨了1个小时,上网查各种资料没有解决。

出去走了一圈,突然想到是不是因为我的日历组件还没有渲染完,el-tabs就加载完了?所以导致日历不能正常的显示,操作了一番,果然是因为这个原因。

我的日历组件直接写到了el-tab-pane里,当页面加载完之后,我点击按钮弹出dialog框,el-tabs和FullCalendar就开始加载,那么el-tabs加载的速度比FullCalendar要快。

所以当切换el-tab-pane时,FullCalendar还没有完全加载完,或者只加载了一部分,所以导致显示不正常。

看一下错误的简要代码,因项目需保密,只展示紧要部分

<el-tab-pane label="xxxx">
          <span slot="label">
            <i class="el-icon-
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值