项目场景:
vue 项目中父组件使用el-tabs标签的形式切换多个子组件,子组件初始化多个echart图表。
问题描述:
除了第一个子组件,其他组件内无论给echart容器怎么设置宽和高,echart图表都不能显示。
<template>
<div class="user-statistics">
<el-tabs type="border-card" @tab-click="changeTab">
<el-tab-pane label="组件一">
<component-one>
</component-one>
</component-one>
<el-tab-pane label="组件二" >
<component-two>
</component-two>
</el-tab-pane>
<el-tab-pane label="组件三">
<component-three>
</component-three>
</el-tab-pane>
</el-tabs>
</div>
</template>
原因分析:
echart图表宽度一直保持100*100(初始化宽高),初步分析echart图表未能初始化获取到容器宽度。因为tab标签下的**子组件**是**同时加载**出来的,切换tab**不会再次**进入子组件**生命周期钩子函数重新加载渲染dom节点**。这样echart初始化和销毁方法就没有执行。解决方案:
方案一:给el-tab-pane标签加上延迟渲染属性<template>
<div class="user-statistics">
<el-tabs type="border-card" @tab-click="changeTab">
<el-tab-pane label="组件一" :lazy="true">
<component-one>
</component-one>
</component-one>
<el-tab-pane label="组件二" :lazy="true">
<component-two>
</component-two>
</el-tab-pane>
<el-tab-pane label="组件三" :lazy="true">
<component-three>
</component-three>
</el-tab-pane>
</el-tabs>
</div>
</template>
方案二:切换时使用v-if 重新渲染
<template>
<div class="user-statistics">
<el-tabs type="border-card" @tab-click="changeTab">
<el-tab-pane label="组件一">
<component-one v-if="activeName==='fitst'">
</component-one>
</component-one>
<el-tab-pane label="组件二">
<component-two v-if="activeName==='second'">
</component-two>
</el-tab-pane>
<el-tab-pane label="组件三">
<component-three v-if="activeName==='third'">
</component-three>
</el-tab-pane>
</el-tabs>
</div>
</template>