问题记录--vue-tab切换时Echarts不能正常展示

问题描述及复现步骤

1:Chrome浏览器 版本 99.0.4844.51（正式版本)
2:点击下载按钮,下载文件.此时Chrome底部下载的黑框提示已经下载成功,然后点击返回按钮,切换Echarts图时会发现Echarts图缩小,当关闭下载的黑框,Echarts图展示正常

期望:

在此操作场景下,能够正常展示Echarts图

问题解决:

排查发现出现问题的原因是使用 切换时我使用的是v-show,v-show是只加载一次，只不过是控制css从而控制显示和隐藏，所以说在初次加载的时候就没有准确的获取父元素的width和height，所以造成Echarts无法正常显示。把 v-show 改成 v-if，v-if的实现是把相应的元素删掉在重新渲染，所以在切换页面的时候就会重新渲染数据表，从而获取到准确的width 和height。

参考文章