elementUI标签页的el-tab-pane里面放了echarts，在打开后，即使没有切换到含echarts的标签页，它也执行了。我们都知道，echarts渲染时，需要获取外层div的尺寸来自动设置echarts的尺寸，如果没有切换到当前tab页，就没有渲染出来，也就无法计算结果：
首先看下el-tab代码，其中Tab3组件是我爱模板网自己定义的组件，里面放了echarts：
01 | <el-tabs v-model="tabName"> |
02 | <el-tab-pane label="打卡列表" name="1"> |
05 | <el-tab-pane label="打卡记录" name="2"> |
08 | <el-tab-pane label="行动报告" name="3"> |
Tab3组件代码（简化了）：
2 | <div class="app-container"> |
3 | <div id="chart" style="width: 100%; height: 370px"></div> |
echarts调用代码：
结果渲染成了下面的效果：
明显是宽度没有渲染成功，我爱模板网在函数drawChart中加入了断点，发现，一进入此页面，即使没有打开第三个标签页，也执行了。知道了结果，就好办了：
方法1：给<el-tab-pane />标签加一个lazy属性
01 | <el-tabs v-model="tabName"> |
02 | <el-tab-pane label="打卡列表" name="1"> |
05 | <el-tab-pane label="打卡记录" name="2"> |
08 | <el-tab-pane label="行动报告" name="3" :lazy="true"> |
方法2：给echarts的标签加上一个if判断
01 | <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> |
02 | <el-tab-pane label="打卡列表" name="1"> |
03 | <Tab1 v-if="activeName==='1'"></Tab2> |
05 | <el-tab-pane label="标签页2" name="2"> |
06 | <Tab1 v-if="activeName==='2'"></Tab2> |
08 | <el-tab-pane label="标签页3" name="3"> |
09 | <Tab1 v-if="activeName==='3'"></Tab2> |
最终效果如下：
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
