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 相关文章推荐
js操作二级联动实现代码
Jul 27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
浅谈node的事件机制
Oct 09 Javascript
原生js实现下拉选项卡
Nov 27 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 cookis创建实现代码
2009/03/16 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
深入理解 JS 垃圾回收
2019/06/03 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
Python深入学习之对象的属性
2014/08/31 Python
python 常用的基础函数
2018/07/10 Python
python导入模块交叉引用的方法
2019/01/19 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
问卷调查计划书
2014/01/10 职场文书
网络程序员自荐信
2014/01/25 职场文书
中学教师请假制度
2014/02/03 职场文书
趣味运动会活动方案
2014/02/12 职场文书
星级党支部申报材料
2014/05/31 职场文书
小学见习报告
2014/10/31 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript