在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 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
详解使用vue-admin-template的优化历程
May 20 Javascript
js实现小时钟效果
Mar 25 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
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
phpStorm2020 注册码
2020/09/17 PHP
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
js解决movebox移动问题
2016/03/29 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
python统计cpu利用率的方法
2015/06/02 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python3中详解fabfile的编写
2018/06/24 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
物业总经理岗位职责
2014/02/28 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
平安建设汇报材料
2014/12/29 职场文书
担保书范文
2015/01/20 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android