now use el-tabs to write a tab page, the tab page has a total of 5 pages, each page has a table with different headers. I use v-if to control the display of each tab page. If you do not use v-if control to switch between tab pages, the header will be misplaced and the scroll bar will not be displayed (the specific reason is not clear what caused it). But some of my actions on the current page need to call the methods of each table, and if I use v-if to judge, I can"t get the methods in the table. The
code is as follows:
list.vue:

                          <el-tabs
                            v-model="activeNameTabGroup"
                            type="border-card"
                            @tab-click="handleClickTabGroup(activeNameTabGroup)"
                            :style="{"height":showTopPanel?"441.11px":"810px"}"
                            class="bom-tab-group">
                            <el-tab-pane label="A" name="material">
                                <PageBOM-A-MaterialItems
                                    :readOnly="readOnly"
                                    :readOnlyA="readOnlyA"
                                    :btnShow="!btnShow"
                                    ref="PageBOM-A-MaterialItems"></PageBOM-A-MaterialItems>
                            </el-tab-pane>
                            <el-tab-pane label="B" name="accessories">
                                <PageBOM-B-MaterialItems
                                    v-if="activeNameTabGroup == accessories"
                                    :readOnlyB="readOnlyB"
                                    :btnShow="!btnShow"
                                    ref="PageBOM-B-MaterialItems"></PageBOM-B-MaterialItems>
                            </el-tab-pane>
                            <el-tab-pane label="C" name="semi-manufactures">
                                <PageBOM-C-MaterialItems 
                                v-if="activeNameTabGroup == semi-manufactures"
                                :readOnlyC="readOnlyC" 
                                :btnShow="!btnShow" 
                                ref="PageBOM-C-MaterialItems"></PageBOM-C-MaterialItems>
                            </el-tab-pane>
                            <el-tab-pane label="D" name="special-making">
                                <PageBOM-D-MaterialItems
                                v-if="activeNameTabGroup == special-making"
                                :readOnlyD="readOnlyD" 
                                :btnShow="!btnShow" 
                                ref="PageBOM-D-MaterialItems"></PageBOM-D-MaterialItems>
                            </el-tab-pane>
                            <el-tab-pane label="E" name="interlining">
                                <PageBOM-E-MaterialItems 
                                v-if="activeNameTabGroup == interlining"
                                :colorReadOnlyE="colorReadOnlyE" 
                                :readOnlyE="readOnlyE" 
                                :btnShow="!btnShow" 
                                ref="PageBOM-E-MaterialItems"></PageBOM-E-MaterialItems>
                            </el-tab-pane>
                        </el-tabs>

I wrote a separate component for each table, which is referenced directly here.
the problem now is here: when I want to call the method of the corresponding table in list.vue in the following way, I will report an error, saying that he undefined
this.$refs ["PageBOM-B-MaterialItems"]. I suspect that I use v-if to determine whether they are displayed, so when the first tab is displayed, nothing else is displayed. I can"t find the corresponding table with refs, so I can"t get the corresponding method.
now I want to know how to call the methods of other tables in this case.

add that if I get rid of v-if, I can get the methods in each table, but when I switch between tab pages, the header will be misplaced and the scroll bar will disappear!