项目场景:
el-tab切换时Echarts图表被压缩在一起或显示异常
如图:
原因分析:
解释1 (但是博主试了下 lazy属性不起作用 果断放弃)
解释2 (用vue自带的$nextTick钩子 + el-tab的自带的change事件)
解决方案:
推荐 第二种方案,这本来也是这个bug的问题所在,
在还没有 切换到 第二个标签页的 时候 , 我已经在mounted 里面把 Echarts画出来了,所以一切换,图表还来不及渲染,就显示异常了吧,
所以这是 当然 要用 $nextTick 哦,处理这个bug非常合适, 当然还可以setTimeout,只是没必要。
代码:
<el-tabs v-model="default_active" @tab-click="handleTabChange">
下面省略了...
//
handleTabChange(tab) {
if (tab.name == "2") {
this.$nextTick(()=>{
this.showEcharts();
})
return;
}
},
mounted() {
this.myMap();
// this.showEcharts(); //不在这里调用 tab2的图表,不然样式会压缩
},