Vue中v-show/v-if切换后echarts宽高问题和不显示问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
在项目中发现,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)




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 年前
更多推荐
所有评论(0)