快捷導(dǎo)航

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

更新時(shí)間：2020年08月03日 08:54:24 作者：淚雨

這篇文章主要介紹了Vue解決echart在element的tab切換時(shí)顯示不正確問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

最近在項(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 class="echartsBox" 
      v-loading="loadingDetail"
      element-loading-spinner="el-icon-loading"
      >
      <echart-line 
      v-if="'fourth' === activeName"  //在這里加上這句話(huà)就可以解決上面的問(wèn)題
      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切換時(shí)顯示不正確問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: