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

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

Vue解決echart在element的tab切換時(shí)顯示不正確問(wèn)題

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

最近在項(xiàng)目中遇到了這種情況,需要在tab控件上渲染多個(gè)echart圖標(biāo),然后切換查看時(shí),發(fā)現(xiàn)圖表的寬度不正確

原因:在頁(yè)面進(jìn)行加載時(shí),隱藏的圖表找不到對(duì)應(yīng)的div大小,所以默認(rèn)給了一個(gè)大小。所以要做的就是在頁(yè)面加載時(shí),就對(duì)圖表進(jìn)行初始化。

網(wǎng)上的解決方案大多都是監(jiān)聽(tīng)tab的切換事件,然后再根據(jù)切換的頁(yè)面重新渲染echart組件,比較麻煩。

如下是個(gè)人的解決方法:

原理:利用v-if屬性,當(dāng)切換至對(duì)應(yīng)的tab時(shí),設(shè)置其v-if的值為true即可,同時(shí)設(shè)置默認(rèn)顯示的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='體動(dòng)' name='move'> <span slot='label'><icon name='move' scale='2'></icon>體動(dòng)</span> <baseline ref='move' :chartData='{}' v-if='’move’ === tabItem'></baseline> </el-tab-pane></el-tabs>

這里默認(rèn)tab為心率tab,當(dāng)切換時(shí),同一時(shí)刻只有一個(gè)v-if為true,當(dāng)將其設(shè)置為true時(shí),Vue會(huì)重新在頁(yè)面渲染組件,即完成了組件渲染的步驟。

補(bǔ)充知識(shí):有關(guān)el-tab-pane中echarts圖遇到的問(wèn)題(element中的Tabs 標(biāo)簽頁(yè))

在項(xiàng)目中,遇到了一個(gè)奇怪問(wèn)題:

element中的el-tabs組件,在el-tab-pane引入echarts圖標(biāo)時(shí),刷新時(shí)沒(méi)有圖標(biāo)出現(xiàn),如果將瀏覽器窗口縮小一點(diǎn),就可以展示.

解決方案:

在echarts中加入v-if來(lái)解決 (另外,有時(shí)我們?cè)陧?xiàng)目中用v-show也會(huì)出現(xiàn)上述類(lèi)似情況,將v-show改成v-if試試就可以解決)

<template> <el-tabs v-model='activeName' @tab-click='handleClick'> <el-tab-pane label='用戶(hù)管理' name='first'>用戶(hù)管理</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='定時(shí)任務(wù)補(bǔ)償' name='fourth'> <div v-loading='loadingDetail' element-loading-spinner='el-icon-loading' > <echart-line v-if='’fourth’ === activeName' //在這里加上這句話就可以解決上面的問(wèn)題 :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切換時(shí)顯示不正確問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 泥浆在线密度计厂家-防爆数字压力表-膜盒-远传压力表厂家-江苏大亚自控设备有限公司 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 山东商品混凝土搅拌楼-环保型搅拌站-拌合站-分体仓-搅拌机厂家-天宇 | 河南mpp电力管_mpp电力管生产厂家_mpp电力电缆保护管价格 - 河南晨翀实业 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 合肥地磅_合肥数控切割机_安徽地磅厂家_合肥世佳电工设备有限公司 | ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 铜镍-康铜-锰铜-电阻合金-NC003 - 杭州兴宇合金有限公司 | 光泽度计_测量显微镜_苏州压力仪_苏州扭力板手维修-苏州日升精密仪器有限公司 | 移动厕所租赁|移动卫生间|上海移动厕所租赁-家瑞租赁 | 北京征地律师,征地拆迁律师,专业拆迁律师,北京拆迁律师,征地纠纷律师,征地诉讼律师,征地拆迁补偿,拆迁律师 - 北京凯诺律师事务所 | 药品冷藏箱厂家_低温冰箱_洁净工作台-济南欧莱博电子商务有限公司官网 | 隧道烘箱_隧道烘箱生产厂家-上海冠顶专业生产烘道设备 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 专业甜品培训学校_广东糖水培训_奶茶培训_特色小吃培训_广州烘趣甜品培训机构 | 艺术漆十大品牌_艺术涂料加盟代理_蒙太奇艺术涂料厂家品牌|艺术漆|微水泥|硅藻泥|乳胶漆 | 厌氧反应器,IC厌氧反应器,厌氧三相分离器-山东创博环保科技有限公司 | ISO9001认证咨询_iso9001企业认证代理机构_14001|18001|16949|50430认证-艾世欧认证网 | 无线遥控更衣吊篮_IC卡更衣吊篮_电动更衣吊篮配件_煤矿更衣吊篮-力得电子 | 集装袋吨袋生产厂家-噸袋廠傢-塑料编织袋-纸塑复合袋-二手吨袋-太空袋-曹县建烨包装 | RO反渗透设备_厂家_价格_河南郑州江宇环保科技有限公司 | 胶泥瓷砖胶,轻质粉刷石膏,嵌缝石膏厂家,腻子粉批发,永康家德兴,永康市家德兴建材厂 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 熔体泵_熔体出料泵_高温熔体泵-郑州海科熔体泵有限公司 | 沈阳液压泵_沈阳液压阀_沈阳液压站-沈阳海德太科液压设备有限公司 | 恒温振荡混匀器-微孔板振荡器厂家-多管涡旋混匀器厂家-合肥艾本森(www.17world.net) | 旅游规划_旅游策划_乡村旅游规划_景区规划设计_旅游规划设计公司-北京绿道联合旅游规划设计有限公司 | 河南档案架,档案密集架,手动密集架,河南密集架批发/报价 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 泰国试管婴儿_泰国第三代试管婴儿费用|成功率|医院—新生代海外医疗 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 污水/卧式/潜水/钻井/矿用/大型/小型/泥浆泵,价格,参数,型号,厂家 - 安平县鼎千泵业制造厂 | 波纹补偿器_不锈钢波纹补偿器_巩义市润达管道设备制造有限公司 | 飞行者联盟-飞机模拟机_无人机_低空经济_航空技术交流平台 | 【法利莱住人集装箱厂家】—活动集装箱房,集装箱租赁_大品牌,更放心 | 纸布|钩编布|钩针布|纸草布-莱州佳源工艺纸布厂 | 塑钢件_塑钢门窗配件_塑钢配件厂家-文安县启泰金属制品有限公司 深圳南财多媒体有限公司介绍 |