iview tabs标签页 嵌套使用 的问题

项目中用到标签页,然后现在要在标签页内再加个标签页:

<template>
  <div>
    <Alert show-icon>当前 View UI(iView)版本为 4.1.2</Alert>
    <Tabs type="card" ref="1">
       <TabPane label="标签一">
            <Tabs ref="2">
                <TabPane label="标签1">标签一的内容</TabPane>
                <TabPane label="标签2">标签二的内容</TabPane>
                <TabPane label="标签3">标签三的内容</TabPane>
            </Tabs>      
      </TabPane>
      <TabPane label="标签二">标签二的内容</TabPane>
      <TabPane label="标签三">标签三的内容</TabPane>
    </Tabs>
  </div>
</template>
<style>
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
        height: 120px;
        margin-top: -16px;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
        background: #fff;
        padding: 16px;
    }

    .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
        border-color: transparent;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
        border-color: #fff;
    }
</style>

测试代码示例:tabs标签页 demo

效果:
TIM图片20200213095308.png

如图所示,不能嵌套?

我现在的办法是内部的那个标签页自己写了个组件,样式类似于 CodePen Home tabs 标签页(以前用js、html、css实现的demo)

自定义标签页组件 与 iview标签页的嵌套 示例

想问一下,iview tabs标签页组件,怎么嵌套使用的呢?

问题已解决:iview中Tabs嵌套使用:Tabs加name属性,TabPane加tab属性对应其Tabs的name值

阅读 5.5k
1 个回答

image.png
image.png
嵌套Tabs和TabPane组件要加这两个属性

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进