（18）在ElementUI的tab切换中使用ECharts出现的问题和解决方法

Posted 2023-04-30

参考技术A 在切换后，图表会缩在一起

第一步绑定： @tab-click="handleClick"

第二步： 在methods中：

Vue+ElementUI实现tab选卡式后台Admin

参考技术A 在以往管理系统开发，相对比较大型的后台都会做成tab选卡式、即左边手风琴列表导航菜单，右边一个tab选卡容器。点击左边的菜单在右边打开一个选卡，选卡中内容是独立的，选卡可以任意切换和关闭。

在组件化开发之前的普遍做法是为tab内嵌入iframe，但现在既然用上vue组件开发我们就不能走老路了。我们使用elementui的tabs组件和menuNav来实现这个效果，我们希望点击menuNav中的item，之后在tabs中会新开一个选卡，选卡中内嵌一个对应的组件，为了减少首屏加载我们希望这个组件异步加载,预览地址: http://othcosaz6.bkt.clouddn.com ,效果如下

以上就是要实现的效果，下面是具体步骤，具体可以直接到仓库查看，觉得对你有帮助的话记得赏颗star哦(^_-) https://github.com/huanent/vue-admin