有关el-tab-pane中echarts图遇到的问题(element中的Tabs 标签页)

在项目中,遇到了一个奇怪问题:
element中的el-tabs组件,在el-tab-pane引入echarts图标时,刷新时没有图标出现,如果将浏览器窗口缩小一点,就可以展示.

解决方案:
在echarts中加入v-if来解决 (另外,有时我们在项目中用v-show也会出现上述类似情况,将v-show改成v-if试试就可以解决)

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">
        <div class="echartsBox" 
           v-loading="loadingDetail"
           element-loading-spinner="el-icon-loading"
           >
            <echart-line 
            v-if="'fourth' === activeName"   //在这里加上这句话就可以解决上面的问题
            class="CurePicture"
            :category="chartData.category"
            :data="chartData.data"
            :unit="chartData.unit"
            ></echart-line>
         </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import echartLine from "@/components/echarts/line"
  export default {
    components: {
    echartLine
    }, 
    data() {
      return {
        activeName: 'second'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

拿走,不用谢!!!送人玫瑰,手留余香
有关el-tab-pane中echarts图遇到的问题(element中的Tabs 标签页)_第1张图片

你可能感兴趣的:(element插件,vue.js,前端)