首先我們會想著在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 }}
新聞熱點
疑難解答
圖片精選