在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学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明