解决vue中el-tab-pane切换的问题
(编辑：jimmy 日期: 2024/11/25 浏览：3 次 )
今天在编写vue的时候用到了el-tabs，然后遇到切换的时候，在次打开el-dialog还是上次的状态（因为两次打开的el-tab-pane数量不一样，就出现了问题）
如下：
第一次打开时的状态，打开到第二次的时候
解决方法
给el-tab-pane命名
<el-tabs type="border-card" v-model="activeName" ></el-tabs>
在script中
data() {
return {
isShow: '',
activeName:'second'
}
},
在每次关闭弹框的时候，在关闭方法中重置activeName
activeName='second'
补充知识：vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
项目中用到了一个页面要实现tab切换实现报表展示，自行百度了一下；最后实现效果，在这里把步骤分享给大家！
创建文件：
tabZujian.vue
<template>
<div class="tabZujian">
<el-tabs v-model="activeName">
<el-tab-pane label="tab1" name="first" :key="'first'">
<child1></child1>
</el-tab-pane>
<el-tab-pane label="tab2" name="second" :key="'second'">
<child2></child2>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
name: 'tabZujian',
components:{
child1:tabZujianChild1,
child2:tabZujianChild2
},
data() {
return {
//默认第一个选项卡
activeName: "first",
}
},
mounted(){
}
}
</script>
tabZujianChild1.vue
<template>
<div class="child1">
我是第一个自组件
</div>
</template>
<script>
export default {
name: 'child1',
mounted(){
console.log("tab1组件")
}
}
</script>
tabZujianChild2.vue
<template>
<div class="child2">
我是第二个子组件
</div>
</template>
<script>
export default {
name: 'child1',
mounted(){
console.log("tab2组件")
}
}
</script>
问题解决：
其实这个问题解决起来非常简单，我们想要的是每次切换tab都能够让对应的tab子组件进行重新渲染。
初始化两个变量 isChildUpdate1:true，isChildUpdate2:false；
使用v-if控制child1和child2是否渲染。
每次切换tab选项的时候，触发事件。让当前点击的tab变量设置位true，让当前组件重新渲染。
这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件
更改一下tabZujian.vue
<template>
<div class="tabZujian">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="tab1" name="first" :key="'first'">
<child1 v-if="isChildUpdate1"></child1>
</el-tab-pane>
<el-tab-pane label="tab2" name="second" :key="'second'">
<child2 v-if="isChildUpdate2"></child2>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
name: 'tabZujian',
components:{
child1:tabZujianChild1,
child2:tabZujianChild2
},
data() {
return {
//默认第一个选项卡
activeName: "first",
isChildUpdate1:true,
isChildUpdate2:false
}
},
mounted(){
},
methods:{
handleClick(tab) {
if(tab.name == "first") {
this.isChildUpdate1 = true;
this.isChildUpdate2 = false;
} else if(tab.name == "second") {
this.isChildUpdate1 = false;
this.isChildUpdate2 = true;
}
}
}
}
</script>
最后成功了。
以上这篇解决vue中el-tab-pane切换的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
下一篇：解决echarts图表使用v-show控制图表显示不全的问题