今天在编写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切换的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“解决vue中el-tab-pane切换的问题”评论...
更新动态
2024年04月29日
2024年04月29日
- dnf继承怎么保留附魔
- 《重装岚影》成就列表一览
- 《百英雄传》:像素群像剧与英雄们的赞美诗
- 《下一站江湖Ⅱ》评测:一块仍需打磨的璞石
- 龙飘飘-人财两旺富贵全-2023-WAV分轨
- 迪克牛仔-国语真经典台湾首版-2005-WAV+CUE
- FrancescaTandoi,MatheusNicolaiewskySanderSmeets-BopWeb(2024Jazz)[Flac24-96]
- 《剑星》遭和谐影响深远:玩家担心《GTA6》被审查
- 世界最贵在售房产 法国达玛雅克城堡出售:33亿人民币
- 《仙剑世界》三测定档5月31日!风启测试招募已启动
- 杨宗纬.2008-鸽子【华纳】【WAV+CUE】
- 群星.2006-意难忘3CD【南方】【WAV+CUE】
- 张靓颖.2009-@音乐【华谊兄弟】【WAV+CUE】
- dnf缝纫机是必得一套吗
- dnf时装裤子身上穿的算吗