iview中 Tabs 标签页 高度撑开问题

<Tabs type="card" class="bh-tabs-card" v-model="kpiValue">
    <template v-for="(itemlx,index) in sbsLx">
        <tab-pane :label="itemlx.name" :name="itemlx.code" >
            <div class="projectDeclarationOne" v-show="itemlx.code==kpiValue" >
                <table
                        border="1"
                        width="100%"
                        height="auto"
                        cellspacing="0"
                        style="border-collapse: collapse;"
                >
                    <caption>
                        <h3 class="tableTitle">{{itemlx.name}}</h3>
                        <h5>{{itemlx.explain}}</h5>
                    </caption>
                </table>
            </div>
        </tab-pane>
    </template>
</Tabs>

解决方法：在代码中添加如下

v-show="itemlx.code==kpiValue"

说明：我们知道v-show指令的作用是：根据条件来切换元素的显示状态其原理是通过修改元素 的display，实现显示隐藏，当没有添加v-show的时候 tab切换 tab1，tab2，tab3 时，每个tab下的 元素都是占位的只是位置不在当前区域，tab1，tab2，tab3类似轮播图形式并列占位 这个时候 整个tab的高度是由 tab1，tab2，tab3 中高度最高的一个决定的，所以我们会发现 切换后会在页面出现下方留白的情况，加上v-show 判断 不满足条件的tab页display: none不占据空间，即不在文档流中 所以解决了这个问题