在vue中使用el-tab-pane v-show/v-if无效的解决

 更新时间:2020年08月03日 09:16:03   作者:安然于心  
这篇文章主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

我就废话不多说了,大家还是直接看代码吧~

解决方法如下:

<template>
 <el-tabs v-model="settype" @tab-click="tabClick" ref="tabs">
  <el-tab-pane label="广告位设置" name="bannerset">广告位设置</el-tab-pane>
  <el-tab-pane label="推送设置" name="sendset">推送设置</el-tab-pane>
  <el-tab-pane label="权限管理" name="authset">权限管理</el-tab-pane>
  <el-tab-pane label="红包配置" name="redpoketset">红包配置</el-tab-pane>
 </el-tabs>
</template>
 
<script>
export default {
  data() {
   return {
    settype: 'bannerset'
   };
  },
 methods: {
  tabClick(tab, event) {
    console.log(tab, event);
    //this.hideTabs(tab);
   },
  hideTabs(idx) {
   this.$refs.tabs.$children[idx].$el.style.display = 'none';
  }
 },
 mounted () {
  this.hideTabs();
 }
}
</script>

补充知识:element ui中table的v-show失效,但是v-if正常

v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效

以上这篇在vue中使用el-tab-pane v-show/v-if无效的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现不定高虚拟列表的示例详解

    vue实现不定高虚拟列表的示例详解

    这篇文章主要为大家详细介绍了在vue环境单页面项目下,如何实现不定高虚拟列表,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • 解决vue3项目打包后部署后某些静态资源图片不加载问题

    解决vue3项目打包后部署后某些静态资源图片不加载问题

    这篇文章主要给大家介绍了如何解决vue3项目打包后部署后某些静态资源图片不加载问题,文中通过图文结合的方式讲解的非常详细,有需要的朋友可以参考下
    2024-05-05
  • vue实现可增删查改的成绩单

    vue实现可增删查改的成绩单

    这篇文章主要为大家详细介绍了vue实现可增删查改的成绩单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue项目打包清除console.log的4种方法

    vue项目打包清除console.log的4种方法

    项目打包的时候想要删除console.log,本文主要介绍了vue项目打包清除console.log的4种方法,具有一定的参考价值,感兴趣的可以了解游戏
    2023-11-11
  • vue2 利用echarts 单独绘制省份的步骤

    vue2 利用echarts 单独绘制省份的步骤

    这篇文章主要介绍了vue2 利用echarts 单独绘制省份,首先引入所需要的第三方模块,通过示例代码给大家介绍的非常详细,文章末尾给大家补充介绍了vue2.x结合echarts2实现显示具体省份热力图的问题,需要的朋友可以参考下
    2022-01-01
  • 浅谈mint-ui loadmore组件注意的问题

    浅谈mint-ui loadmore组件注意的问题

    下面小编就为大家带来一篇浅谈mint-ui loadmore组件注意的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue中解决异步交互数据出现延迟问题

    vue中解决异步交互数据出现延迟问题

    这篇文章主要介绍了vue中解决异步交互数据出现延迟问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue如何在main.js中配置全局的通用公共组件

    vue如何在main.js中配置全局的通用公共组件

    这篇文章主要介绍了vue如何在main.js中配置全局的通用公共组件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue3自定义确认密码匹配验证规则的操作代码

    vue3自定义确认密码匹配验证规则的操作代码

    这篇文章主要介绍了vue3自定义确认密码匹配验证规则的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue3中实现微信扫码登录的步骤和代码示例

    Vue3中实现微信扫码登录的步骤和代码示例

    在 Vue 3 中实现微信扫码登录,涉及到前端生成二维码、监听微信回调以及与后端的交互,本文给大家介绍了一个详细的实现步骤和代码示例,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-07-07

最新评论