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


Posted in Javascript onAugust 03, 2020

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

解决方法如下:

<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中使用el-tab-pane v-show/v-if无效的解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
javascript相关事件的几个概念
May 21 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 #Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 #Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
js实现3D旋转相册
Aug 02 #Javascript
js实现双色球效果
Aug 02 #Javascript
You might like
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
javascript代码加载优化方法
2011/01/30 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
BootStrap中
2016/12/10 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
详解python tkinter模块安装过程
2020/01/06 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
如何在sublime编辑器中安装python
2020/05/20 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
护理自荐信
2013/10/22 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL