Vue解决echart在element的tab切换时显示不正确问题


Posted in Javascript onAugust 03, 2020

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

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

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

如下是个人的解决方法:

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

举例如下:

<el-tabs type="card" v-model="tabItem">
 <el-tab-pane name="heart">
  <span slot="label"><icon name="heart" scale="2"></icon>心率</span>
  <baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
 </el-tab-pane>
 <el-tab-pane name="breath">
  <span slot="label"><icon name="breath" scale="2"></icon>呼吸</span>
  <baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline>
 </el-tab-pane>
 <el-tab-pane label="体动" name="move">
  <span slot="label"><icon name="move" scale="2"></icon>体动</span>
  <baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline>
 </el-tab-pane>
</el-tabs>

这里默认tab为心率tab,当切换时,同一时刻只有一个v-if为true,当将其设置为true时,Vue会重新在页面渲染组件,即完成了组件渲染的步骤。

补充知识:有关el-tab-pane中echarts图遇到的问题(element中的Tabs 标签页)

在项目中,遇到了一个奇怪问题:

element中的el-tabs组件,在el-tab-pane引入echarts图标时,刷新时没有图标出现,如果将浏览器窗口缩小一点,就可以展示.

解决方案:

在echarts中加入v-if来解决 (另外,有时我们在项目中用v-show也会出现上述类似情况,将v-show改成v-if试试就可以解决)

<template>
 <el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿" name="fourth">
    <div class="echartsBox" 
      v-loading="loadingDetail"
      element-loading-spinner="el-icon-loading"
      >
      <echart-line 
      v-if="'fourth' === activeName"  //在这里加上这句话就可以解决上面的问题
      class="CurePicture"
      :category="chartData.category"
      :data="chartData.data"
      :unit="chartData.unit"
      ></echart-line>
     </div>
  </el-tab-pane>
 </el-tabs>
</template>
<script>
import echartLine from "@/components/echarts/line"
 export default {
  components: {
  echartLine
  }, 
  data() {
   return {
    activeName: 'second'
   };
  },
  methods: {
   handleClick(tab, event) {
    console.log(tab, event);
   }
  }
 };
</script>

拿走,不用谢!!!

以上这篇Vue解决echart在element的tab切换时显示不正确问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 #Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
js实现3D旋转相册
Aug 02 #Javascript
js实现双色球效果
Aug 02 #Javascript
js实现tab栏切换效果
Aug 02 #Javascript
You might like
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
常用的javascript设计模式
2017/01/11 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
浅谈js中的bind
2019/03/18 Javascript
React优化子组件render的使用
2019/05/12 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
商务英语专业求职信范文
2014/01/28 职场文书
致200米运动员广播稿
2014/02/06 职场文书
爱情保证书大全
2014/04/29 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2015年推普周活动总结
2015/03/27 职场文书
成人成长感言如何写?
2019/08/16 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技