element-ui tabs隐藏某个标签（v-show不起作用的解决方法）

解决方法

直接展示代码，代码如下所示

<template>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in elTabs" :key="index" :label="item.label" :name="item.name">{{item.content}}el-tab-pane>
    el-tabs>
  div>
template>

<script>
export default {
  data () {
    return {
      activeName: '',
      elTabs: [
        {label: '用户管理', name: '1', content: '用户管理', status: false},
        {label: '配置管理', name: '2', content: '配置管理', status: true},
        {label: '角色管理', name: '3', content: '角色管理', status: true}
      ]
    }
  },
  mounted () {
    this.hideTabs()
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    hideTabs () {
      this.$nextTick(() => {
        // 此处的id为tab- name
        this.elTabs.forEach(item => {
          if (item.status === false) {
            document.getElementById('tab-' + item.name).style.display = 'none'
          }
        })
      })
      // 比如说要默认激活某个，就输入激活名
      this.activeName = '2'
    }
  }
}
script>

<style scoped>

.display-none .el-tabs__item {
    display:none
}

style>

结果如下，可看见成功隐藏 status 为false 的用户管理

v-show 为什么不起作用呢

v-show的api文档 如下所示：
实际上v-show 是操作css的 display，但是由于element-ui封装较多，内层的 display 覆盖了外层的display，导致v-show没有效果，所以需要用js，在页面渲染后，修改其style才能够实现隐藏。