首页 > 建站教程 > 前端框架 >  elementUI标签页<el-tabs>渲染echarts图的问题正文

elementUI标签页<el-tabs>渲染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>
最终效果如下: