iview的Tabs标签页只有一个(或没有)面板TabPane的时候,隐藏标签Tab

2021-04-11 1493点热度 0人点赞 1条评论

前言

最近在使用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>

admin

这个人很懒,什么都没留下

文章评论

  • artiree

    Nizagara From India - brand name cialis online buy cialis 5mg online Cialis Viagra Barcelona Doctissimo Viagra 25 Cialis Cialis Gravidanza

    2022-05-12
  • 您需要 登录 之后才可以评论