首先我們會想著在mounted或者created裡面加入想要執行的方法，但是有的時候會遇到在你執行這個方法的時候，頁面還並沒有被渲染完成，所以就會出現這個方法在匹配頁面標籤報錯的情況。

解決思路：

1.通過子頁面呼叫父頁面的方法，因為在子頁面開始渲染的時候，你的父頁面肯定是已經渲染好了的，前提這裡的方法中是去找尋父頁面的標籤。

2.直接在本頁面監視一個引數，發現引數被初始化了，說明頁面也已經載入完成，因為你的頁面用到了這個引數。

方法1案例：tab頁裡的子頁面如果沒有內容就隱藏

父頁面程式碼

<el-tabs v-model="initTab" type="card">
  <el-tab-pane label="1資訊" name="tab1">
    1
  </el-tab-pane>
  <el-tab-pane label="2報告" name="tab2">
    2
  </el-tab-pane>
  <el-tab-pane label="3資訊" name="tab3">
    3
  </el-tab-pane>
  <el-tab-pane label="4資訊" name="tab4">
    <ziyemian-group @tabShow="tabShow" title="4資訊" v-if="detailInfo">
    </ziyemian-group>

  </el-tab-pane>
  <el-tab-pane label="5資訊" name="tab5">
    5
  </el-tab-pane>
  <el-tab-pane label="其它資訊" name="tab6">
    6
  </el-tab-pane>
</el-tabs>

import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
  ZiyemianGroup
},
data () {
    return {
        detailInfo: {}，
        initTab：‘tab1’
    }
}
methods: {
  tabShow: (data) => {
    document.getElementsByClassName('el-tabs__item').item(4).style.display = data
  },
}
 

然後是ZiyemianGroup.vue的程式碼，這裡主要就是方法呼叫，頁面自己搞定

data () {
  return {
    list: []
  }
},
mounted () {
  this.init()
},
methods: {
  init() {
    if (list.length > 0) {
        this.$emit('whiteShow', 'inline')
    } else {
        this.$emit('whiteShow', 'none')
    }
  )
}

list是子頁面的內容，這樣如果子頁面沒有內容就可以隱藏掉了

方法2案例：我這邊需要tab頁隱藏

<el-tabs v-model="initTab" type="card">
  <el-tab-pane label="1資訊" name="tab1">
    1
  </el-tab-pane>
  <el-tab-pane label="2報告" name="tab2">
    2
  </el-tab-pane>
  <el-tab-pane label="3資訊" name="tab3">
    3
  </el-tab-pane>
  <el-tab-pane label="4資訊" name="tab4">
    <ziyemian-group title="4資訊" v-if="detailInfo">
    </ziyemian-group>

  </el-tab-pane>
  <el-tab-pane label="5資訊" name="tab5">
    5
  </el-tab-pane>
  <el-tab-pane label="其它資訊" name="tab6">
    6
  </el-tab-pane>
</el-tabs>

import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
  ZiyemianGroup
},
data () {
    return {
        detailInfo: {}，
        initTab：‘tab1’
    }
}
watch: {
  detailInfo: function () {
    this.$nextTick(function () {
      this.tabShow()
    })
  }
},
methods: {
    tabShow () {
        document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隱藏tab6
    }
}
 

nextTick方法，意思是在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。

隱藏tab的方法我用了原生js，因為vue生成後的頁面和寫的vue頁面有所差別，所以我直接用了最笨的方法進行匹配。