首先看下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>最终效果如下: