解决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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php str_replace的替换漏洞
2008/03/15 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP扩展开发入门教程
2015/02/26 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
Python进行数据提取的方法总结
2016/08/22 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python字符串循环左移
2019/03/08 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Django 重写用户模型的实现
2019/07/29 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
什么是.net
2015/08/03 面试题
财务会计应届生求职信
2013/11/24 职场文书
配件采购员岗位职责
2013/12/03 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
实验教师岗位职责
2014/02/13 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
房屋出租协议书
2014/04/10 职场文书
车间核算员岗位职责
2014/07/01 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js