iview的Tabs标签页只有一个（或没有）面板TabPane的时候，隐藏标签Tab

前言

最近在使用iview做项目的时候，遇到一个需求，就是在使用Tabs 标签页的时候，面板TabPane的数量是动态的，但是如果遇到Tabs只有一个的时候，就隐藏掉Tab的标签。虽然官方的API没有现成的实现，但是通过自定义的css，可以做到。

实现

准备好隐藏和显示tab标签的css：

 /*一个TabPane都时候，把tab隐藏*/
.my-tabs-hidden .ivu-tabs-bar{
    display: none;
}
.my-tabs-block .ivu-tabs-bar{
    display: block;
}

html页面根据变量(items)来显示tab-pane，根据items的length来确定是否增加my-tabs-hidden的class

<Tabs :animated="false" v-bind:class="{'my-tabs-hidden':items.length<=1,'my-tabs-block':items.length>1}">
    <TabPane :label="item.label" v-for="(item, index) in items">
    </TabPane>
</tabs>

<!-- 或者 -->

<tabs :animated="false" v-bind:class="{'my-tabs-hidden':items.length<=1,'my-tabs-block':items.length>1}">
    <tab-pane :label="item.label" v-for="(item, index) in items">
    </tab-pane>
</tabs>