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 相关文章推荐
javascript中的new使用
Mar 20 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
JavaScript实现复选框全选功能
Apr 11 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实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
全面了解python字符串和字典
2016/07/07 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
代码详解django中数据库设置
2019/01/28 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
使用python实现简单五子棋游戏
2019/06/18 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
初中物理教学反思
2014/01/14 职场文书
药品促销活动方案
2014/02/14 职场文书
预备党员综合考察材料
2014/05/31 职场文书
学校欢迎标语
2014/06/18 职场文书
立志成才演讲稿
2014/09/04 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
工程款催款函
2015/06/24 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Python的这些库,你知道多少?
2021/06/09 Python
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis