• 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="{'300px',height:'400px'}"></vertical-chart>
        </div>
        <div class="testLeft" v-else>
          <line-chart :style="{'400px',height:'300px'}"></line-chart>
        </div>

    在 script中

      updated(){
         //更改store里的数值
      }
  • 相关阅读:
    Codechef Observing the Tree
    bzoj 1367: [Baltic2004]sequence
    bzoj 2375: 疯狂的涂色
    bzoj 1455: 罗马游戏
    codevs 1029 遍历问题
    HNOI2004 宠物收养所 (Treap)
    [ZJOI2007] 报表统计
    bzoj 3261: 最大异或和 (可持久化trie树)
    codevs 1001 舒适的路线
    Codechef Dynamic Trees and Queries
  • 原文地址:https://www.cnblogs.com/ada-blog/p/9474433.html
Copyright © 2020-2023  润新知