一、问题描述
最近的项目有这样一个需求,引用一个日历组件,我用的方案是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-