解决vue中el-tab-pane切换的问题

今天在编写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切换的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。