Vueechart在element的tab切换时显示不正确怎么办-创新互联

这篇文章主要为大家展示了Vue echart在element的tab切换时显示不正确怎么办,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

创新互联是一家专注于成都网站制作、网站设计、外贸网站建设多线服务器托管的网络公司,有着丰富的建站经验和案例。

最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确

原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小。所以要做的就是在页面加载时,就对图表进行初始化。

网上的解决方案大多都是监听tab的切换事件,然后再根据切换的页面重新渲染echart组件,比较麻烦。

如下是个人的解决方法:

原理:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置默认显示的tab

举例如下:


 
  心率
  
 
 
  呼吸
  
 
 
  体动
  
 

新闻名称:Vueechart在element的tab切换时显示不正确怎么办-创新互联
URL标题:http://www.hxwzsj.com/article/gsjch.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 成都网站设计 成都模版网站建设 营销网站建设 成都网站建设 成都营销网站建设 成都网站设计 LED网站设计方案 教育网站设计方案 网站制作报价 专业网站建设 企业网站设计 网站建设 H5网站制作 成都网站建设公司 成都网站设计 企业网站建设公司 网站建设改版 高端网站设计 上市集团网站建设 成都网站设计 成都网站制作 网站设计