溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了Vue echart在element的tab切換時顯示不正確怎么辦，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
最近在項目中遇到了這種情況，需要在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切換時顯示不正確怎么辦的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
