之前vue+tab+echarts使用出现问题时用《 vue+Framework7+echarts时使用tab组件出现的问题 》中的方法解决。
今天用vant时同样遇到了这种问题:第一轮点击时tab中的echarts均正常显示,但是之后再点击,均无数据,无法正常显示。
这次用的方法感觉比之前相对简单方便,先销毁子组件,触发事件产生时再重置:
.vue
<!--子组件中包含了echarts图标-->
<van-tabs v-model="active" sticky>
<van-tab title="tab1">
<子组件1 v-if="condition1"></子组件1>
</van-tab>
<van-tab title="tab2">
<子组件2 v-if="condition2"></子组件2>
</van-tab>
</van-tabs>
.js
//import 子组件1与子组件2
export default {
data () {
return {
active: 0,
condition1: true,
condition2: false,
}
},
//监听tab当前显示的页面时哪个
watch: {
active (val, oldVal) {
this.refreshChart(val);
}
},
methods: {
refreshChart (ele) {
if (ele == 1) {
this.$nextTick(() => {
this.condition2 = true
this.condition1 = false
})
}
if (ele == 0) {
this.$nextTick(() => {
this.condition1= true
this.condition2 = false
})
}
},
},
components: {
子组件1,子组件2
},
}