elementUI标签页渲染echarts图的问题

elementUI标签页的el-tab-pane里面放了echarts，在打开后，即使没有切换到含echarts的标签页，它也执行了。我们都知道，echarts渲染时，需要获取外层div的尺寸来自动设置echarts的尺寸，如果没有切换到当前tab页，就没有渲染出来，也就无法计算结果：
首先看下el-tab代码，其中Tab3组件是我爱模板网自己定义的组件，里面放了echarts：

<el-tabs v-model="tabName">
  <el-tab-pane label="打卡列表" name="1">
    <Tab1></Tab1>
  </el-tab-pane>
  <el-tab-pane label="打卡记录" name="2">
    <Tab2></Tab2>
  </el-tab-pane>
  <el-tab-pane label="行动报告" name="3">
    <Tab3></Tab3>
  </el-tab-pane>
</el-tabs>

Tab3组件代码（简化了）：

<template>
    <div class="app-container">
        <div id="chart" style="width: 100%; height: 370px"></div>
    </div>
  </div>
</template>

echarts调用代码：

mounted(){
    var that = this;
    that.drawChart();
}

结果渲染成了下面的效果：


明显是宽度没有渲染成功，我爱模板网在函数drawChart中加入了断点，发现，一进入此页面，即使没有打开第三个标签页，也执行了。知道了结果，就好办了：

方法1：给<el-tab-pane />标签加一个lazy属性

<el-tabs v-model="tabName">
  <el-tab-pane label="打卡列表" name="1">
    <Tab1></Tab1>
  </el-tab-pane>
  <el-tab-pane label="打卡记录" name="2">
    <Tab2></Tab2>
  </el-tab-pane>
  <el-tab-pane label="行动报告" name="3" :lazy="true">
    <Tab3></Tab3>
  </el-tab-pane>
</el-tabs>

方法2：给echarts的标签加上一个if判断

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
  <el-tab-pane label="打卡列表" name="1">
    <Tab1 v-if="activeName==='1'"></Tab2>
  </el-tab-pane>
  <el-tab-pane label="标签页2" name="2">
    <Tab1 v-if="activeName==='2'"></Tab2>
  </el-tab-pane>
  <el-tab-pane label="标签页3" name="3">
    <Tab1 v-if="activeName==='3'"></Tab2>
  </el-tab-pane>
</el-tabs>

最终效果如下：




部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！