在项目中发现,tab切换页面使用v-show时,echarts图表的宽高变成100px,因此改为用v-if切换。

但是v-if切换后echarts图表为空白,不显示。

这是因为在切换后并没有触发生命周期函数,没有获取到dom结构。

解决方法:

用vue的nextTick()方法,

nextTick():在下次 DOM 更新循环结束之后执行延迟回调。为了在修改数据之后获取更新后的 DOM,就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。可以理解为:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数。

监听tab切换,并在切换后执行的方法内使用:

    watch: {
      orgNoValue: 'updateCity',
    },    
    updateCity() {
      this.$nextTick(() => {
        this.initFunc()  // 包括获取echarts的option的方法
      })
    },

v-if和v-show的区别

v-if:当隐藏结构时该结构会直接从整个dom树中移除;(删除重构DOM)
v-show:当隐藏结构时是在该结构的style中加上display:none,结构依然保留。(改变style)

GitHub 加速计划 / vu / vue
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
9e887079 [skip ci] 11 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐