echars tabs切换组件使用v-if 不能显示的问题

最新推荐文章于 2023-03-10 13:24:39 发布

阿发今年二十八

最新推荐文章于 2023-03-10 13:24:39 发布

阅读量600

点赞数

分类专栏：解bug

本文链接：https://blog.csdn.net/weixin_45212940/article/details/108872262

版权

本文探讨了在使用Echarts组件时，遇到的Vue tabs切换组件配合v-if指令导致图表无法正常显示的问题。通过分析v-if与v-show在生命周期中的差异，以及computed和watch的执行顺序，提出将watch改为computed来解决图表重绘问题。

摘要由CSDN通过智能技术生成

echars tabs切换组件使用v-if 不能显示的问题

问题描述

写了一个tabs切换组件，子组件开始时使用watch监听父组件传入的props参数，然后进行echarts渲染，但是发现父组件加上v-if切换以后子组件的图表并没有重新渲染，参考v-if触发子组件的生命周期和computed，watch的渲染顺序以后，把子组件的watch改成computed之后可以实现。

父组件

<template>
  <div class="tab-chart-panel">
    <da-tab
      v-model="currentTabKey"
      @change="handleTabChange"
      class="da-tab"
    />
    <div class="chart-container">
      <div
        id="alarm"
        v-if="currentTabKey === '1'"
        :style="{
       'z-index': currentTabKey === '1' ? 3 : -1, 'opacity': currentTabKey === '1' ? 1 : 0 }"
      >
        <chart-bar ref="chartBar" :option="alarmData.chartOption" />
        <div class="alarm-list">
          <div v-for="item in alarmData.list" :key="item.title" class="alarm-list-item">
            <span class="title">{
  { item.title }}：</span><span class="num">{
  { item.val }}</span>
          </div>
        </div>
      </div>
      <div
        id="protect"
        v-if