v-if和updated钩子结合使用渲染echart图表

项目需求是这样的，用户可以自定选择echart 曲线图是横向还是竖向显示。我的做法是写了一个横向的echart图表，也写了一个竖向的echart图表，然后两者共用存在store里的图表数据，就能实现切换显示了。

实际项目中发现的问题是如果用v-show 切换两个图表，后来显示的会因为没有高度而没有办法撑开。

解决办法换成v-if，因为v-if重新改了dom，所以图表可以重新获取高度从而重新渲染图表，实现图表的切换, 但是切换后的图表没有数据了。

解决办法用v-if切换图表，并且在updated 钩子函数中再给store的里面的来重新赋予数值。

代码如下：template中

    <div>

      <el-button type='primary' @click="testIf=!testIf">test</el-button>

    </div>

    <div class="testLeft" v-if="testIf">

      <vertical-chart :style="{width:'300px',height:'400px'}"></vertical-chart>

    </div>

    <div class="testLeft" v-else>

      <line-chart :style="{width:'400px',height:'300px'}"></line-chart>

    </div>

在 script中

  updated(){

     //更改store里的数值

  }

巴特西

v-if和updated钩子结合使用渲染echart图表

最新文章

热门文章

巴特西

v-if和updated钩子结合使用 渲染echart图表

最新文章

热门文章

v-if和updated钩子结合使用渲染echart图表