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-date"></i>
          </span>
          <FullCalendar ref="myCalendar" :options="calendarOptions" />
  </el-tab-pane>

 data () {
    // const month = new Date().getMonth()
    // const year = new Date().getFullYear()
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        initialView: 'timeGridWeek',
        events: [
          { title: 'event 1', date: '2020-06-01', classNames: ['cal'] },
          { title: 'event 2', date: '2020-06-02', classNames: ['inv'] },
          { title: '公司会议', start: '2020-06-22 09:05', end: '2020-06-23 12:00', classNames: ['cal'] },
          { title: '部门会议', start: new Date(), classNames: ['cal'] }
        ],
     }    
  },

三、解决问题

分析完原因之后就要解决问题了，那么需要解决的问题就是让el-tab-pane延时加载，保证当el-tab-pane加载完之前，FullCalendar一定已经加载完成了。通过浏览element的官方文档，发现el-tab-pane有一个lazy属性。

所以只需要给这个加载日历的el-tab-pane添加一个属性lazy并且赋值为true就可以了
看一下正确的代码和效果