解决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切换的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是 解决vue中el-tab-pane切换的问题 的全部内容, 来源链接: utcz.com/p/237528.html

回到顶部