解决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 相关文章推荐
文字幻灯片
Jun 26 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
php 正则 过滤html 的超链接
2009/06/02 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
详解Angular2响应式表单
2017/06/14 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
Python编写一个闹钟功能
2017/07/11 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python元组知识点总结
2019/02/18 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
菜篮子工程实施方案
2014/03/08 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
考研英语复习计划
2015/01/19 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
离婚起诉书范本
2015/05/18 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫