Vue解決echart在element的tab切換時(shí)顯示不正確問(wèn)題
最近在項(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)。
相關(guān)文章:
1. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令2. Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理3. 使用Hangfire+.NET 6實(shí)現(xiàn)定時(shí)任務(wù)管理(推薦)4. 如何在jsp界面中插入圖片5. phpstudy apache開(kāi)啟ssi使用詳解6. jsp實(shí)現(xiàn)登錄驗(yàn)證的過(guò)濾器7. jsp文件下載功能實(shí)現(xiàn)代碼8. 詳解瀏覽器的緩存機(jī)制9. 爬取今日頭條Ajax請(qǐng)求10. xml中的空格之完全解說(shuō)
