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

今天在编写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切换的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • vue Tab切换以及缓存页面处理的几种方式

    前言 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) //通过点击就可以实现两个组件来回切换 <button @click="changeView">切换view</button> <component :is="currentView"></component> impor

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • Vue.js实现tab切换效果

    Vue是一个小巧轻便的JavaScript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 目前在学习Vue.js.在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM.他通过一些特殊的hmtl语法,将DOM和数据绑定起来.一旦创建了绑定,DOM就会和数据保持同步,每当变更了数据,DOM也会相应的发生改变,更新. 下面是我用vue.js来实现的tab切换功能. <!--这里

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

    今天在编写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

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

  • 使用Vuex解决Vue中的身份验证问题

    传统方式中,许多人使用本地存储,来管理通过客户端验证生成的tokens.一个大问题是如何有更好的方式,来管理验证tokens,从而允许我们来存储更大的用户信息. 这就是Vuex的作用. Vuex为Vue.js应用管理状态..对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变. 对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧. 建立应用模块 对于这个项目,我们想创建一个使用vuex和vue-router的vue应用.我们会使用vue cli 3

  • 解决vue中修改了数据但视图无法更新的情况

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

  • 简单理解vue中el、template、replace元素

    本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

  • 解决vue中监听input只能输入数字及英文或者其他情况的问题

    如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search

  • 解决Vue中 父子传值 数据丢失问题

    在Vue中,父子组件传值,子组件通过props接收父组件传递的数据 父组件 questionList :传递数据参数 questionsLists: 传递数据源 子组件 porps 接收父组件方式有俩中,一种是通过对象形式,一种是通过数组形式,通过数组形式接收多个数据时用逗号隔开即可.比如:props:['a','b']. 需要注意的是在子组件中 接收父组件的数据参数,必须和父组件传递时的 参数一致,上图中的 questionList 这种情况下会出现这么一个情况,刷新页面之后子组件接收的父组件

  • 解决vue中使用proxy配置不同端口和ip接口问题

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

随机推荐