在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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 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
php将时间差转换为字符串提示
2011/09/07 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
9种python web 程序的部署方式小结
2014/06/30 Python
在centos7中分布式部署pyspider
2017/05/03 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python异常处理操作实例详解
2018/05/10 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
八一建军节感言
2014/02/28 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
请病假条范文
2015/08/17 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis