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


Posted in Javascript onJuly 19, 2020

今天在编写vue的时候用到了el-tabs,然后遇到切换的时候,在次打开el-dialog还是上次的状态(因为两次打开的el-tab-pane数量不一样,就出现了问题)

如下:

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

第一次打开时的状态,打开到第二次的时候

解决vue中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>

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

问题解决:

其实这个问题解决起来非常简单,我们想要的是每次切换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切换的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 #Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 #Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 #Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 #Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 #Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 #Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 #Javascript
You might like
Smarty使用自定义资源的方法
2015/08/08 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
JSON格式化输出
2014/11/10 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python如何快速实现分布式任务
2017/07/06 Python
详解python中的 is 操作符
2017/12/26 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
会计主管岗位职责
2014/01/03 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
2014年护士长工作总结
2014/11/11 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
看雷锋电影观后感
2015/06/10 职场文书
关于分班的感言
2015/08/04 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python