电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue解決echart在element的tab切換時顯示不正確問題

瀏覽:116日期:2022-12-19 17:41:32

最近在項目中遇到了這種情況,需要在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 v-loading='loadingDetail' element-loading-spinner='el-icon-loading' > <echart-line v-if='’fourth’ === activeName' //在這里加上這句話就可以解決上面的問題 :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切換時顯示不正確問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: TPE_TPE热塑性弹性体_TPE原料价格_TPE材料厂家-惠州市中塑王塑胶制品公司- 中塑王塑胶制品有限公司 | 氢氧化钙设备, 氢氧化钙生产线-淄博惠琛工贸有限公司 | 半容积式换热器_北京浮动盘管换热器厂家|北京亿丰上达 | 工业车间焊接-整体|集中除尘设备-激光|等离子切割机配套除尘-粉尘烟尘净化治理厂家-山东美蓝环保科技有限公司 | 免费分销系统 — 分销商城系统_分销小程序开发 -【微商来】 | 档案密集柜_手动密集柜_智能密集柜_内蒙古档案密集柜-盛隆柜业内蒙古密集柜直销中心 | 密集架-手摇-智能-移动-价格_内蒙古档案密集架生产厂家 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 直读光谱仪,光谱分析仪,手持式光谱仪,碳硫分析仪,创想仪器官网 | 德国BOSCH电磁阀-德国HERION电磁阀-JOUCOMATIC电磁阀|乾拓百科 | 自动部分收集器,进口无油隔膜真空泵,SPME固相微萃取头-上海楚定分析仪器有限公司 | 地脚螺栓_材质_标准-永年县德联地脚螺栓厂家 | 阁楼货架_阁楼平台_仓库仓储设备_重型货架_广州金铁牛货架厂 | 烽火安全网_加密软件、神盾软件官网 | 合同书格式和范文_合同书样本模板_电子版合同,找范文吧 | 粉丝机械,粉丝烘干机,粉丝生产线-招远市远东粉丝机械有限公司 | 标准件-非标紧固件-不锈钢螺栓-非标不锈钢螺丝-非标螺母厂家-三角牙锁紧自攻-南京宝宇标准件有限公司 | 上海皓越真空设备有限公司官网-真空炉-真空热压烧结炉-sps放电等离子烧结炉 | 环保袋,无纺布袋,无纺布打孔袋,保温袋,环保袋定制,环保袋厂家,环雅包装-十七年环保袋定制厂家 | 线材成型机,线材折弯机,线材成型机厂家,贝朗自动化设备有限公司1 | 佛山商标注册_商标注册代理|专利注册申请_商标注册公司_鸿邦知识产权 | 圆形振动筛_圆筛_旋振筛_三次元振动筛-河南新乡德诚生产厂家 | 精密光学实验平台-红外粉末压片机模具-天津博君 | 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 电加热导热油炉-空气加热器-导热油加热器-翅片电加热管-科安达机械 | 学叉车培训|叉车证报名|叉车查询|叉车证怎么考-工程机械培训网 | 上海佳武自动化科技有限公司 | 软文发布平台 - 云软媒网络软文直编发布营销推广平台 | 动环监控_机房环境监控_DCIM_机房漏水检测-斯特纽 | 无尘烘箱_洁净烤箱_真空无氧烤箱_半导体烤箱_电子防潮柜-深圳市怡和兴机电 | 耐酸泵,耐腐蚀真空泵,耐酸真空泵-淄博华舜耐腐蚀真空泵有限公司 精密模具-双色注塑模具加工-深圳铭洋宇通 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 高温链条油|高温润滑脂|轴承润滑脂|机器人保养用油|干膜润滑剂-东莞卓越化学 | 冲锋衣滑雪服厂家-冲锋衣定制工厂-滑雪服加工厂-广东睿牛户外(S-GERT) | 帽子厂家_帽子工厂_帽子定做_义乌帽厂_帽厂_制帽厂_帽子厂_浙江高普制帽厂 | 礼仪庆典公司,礼仪策划公司,庆典公司,演出公司,演艺公司,年会酒会,生日寿宴,动工仪式,开工仪式,奠基典礼,商务会议,竣工落成,乔迁揭牌,签约启动-东莞市开门红文化传媒有限公司 | ISO9001认证咨询_iso9001企业认证代理机构_14001|18001|16949|50430认证-艾世欧认证网 | 佛山市德信昌电子有限公司 | 品牌策划-品牌设计-济南之式传媒广告有限公司官网-提供品牌整合丨影视创意丨公关活动丨数字营销丨自媒体运营丨数字营销 |