在el-tab-pane选项卡中使用echarts 、fullCalendar等页签切换，页面缩放等导致fullCalendar，echarts渲染不全的问题

遇到的问题

1.使用el-tab-pane切换时,引入echarts组件,canvas100%的宽度会变为100px
2.数据不渲染

解决办法1(该方法fullCalendar也适用)

echarts组件加上v-if（必须是组件形式引入的），非组件看下面方法2

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="首页" name="first">
         <div></div>
     </el-tab-pane>
     <el-tab-pane label="统计分析" name="second">
          <div class="echarts">
              <lineEchart
                v-if="activeName === 'second'"
                id="chart1"
                :dataList="barList"
              >
              </lineEchart>
          </div>
      </el-tab-pane>
   </el-tabs>
</template>

解决办法2

直接使用echart而不是引入组件，用echarts的resize()

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="控制参数" name="conf">控制参数</el-tab-pane>
  <el-tab-pane label="实时曲线" name="echarts">
    <el-row :gutter="30">
      <el-col :span="12">
        <div ref="valveEchart" style="width: 100%;height:400px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="powerEchart" style="width: 100%;height:400px;"></div>
      </el-col>
    </el-row>
  </el-tab-pane>
</el-tabs>

mounted() {
  this.myChartMethod()
},
methods: {
  handleClick(tab) {
      // 重点在这步
      this.$nextTick(() => {
        echarts.getInstanceByDom(this.$refs.valveEchart).resize()
        echarts.getInstanceByDom(this.$refs.powerEchart).resize()
      })
  },
  myChartMethod() {
    // 初始化
    var valveEchart = echarts.init(this.$refs.valveEchart)
    var powerEchart = echarts.init(this.$refs.powerEchart)

    // 配置
    var valveOption = {}
    var powerOption = {}

    valveEchart.setOption(valveOption)
    powerEchart.setOption(powerOption)
  }
}


 

2.vue的element中的el-tabs中使用FullCalendar加载异常的问题，延迟渲染el-tab-pane标签
分析完原因之后就要解决问题了，那么需要解决的问题就是让el-tab-pane延时加载，保证当el-tab-pane加载完之前，FullCalendar一定已经加载完成了。通过浏览element的官方文档，发现el-tab-pane有一个lazy属性。
 
 所以只需要给这个加载日历的el-tab-pane添加一个属性lazy并且赋值为true就可以了
 看一下正确的代码和效果