解决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 相关文章推荐
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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
global.php
2006/12/09 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
JavaScript中Function详解
2015/02/27 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python实现代码统计程序
2019/09/19 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
解除劳动关系协议书2篇
2014/11/28 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
初婚未育证明样本
2015/06/18 职场文书
门面租赁合同范文
2019/08/06 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技