iview中嵌套使用tabs注意事项

最新推荐文章于 2025-04-17 17:55:14 发布

W2andye

最新推荐文章于 2025-04-17 17:55:14 发布

阅读量7.5k

点赞数 8

分类专栏：前端文章标签： iview 嵌套tabs

本文链接：https://blog.youkuaiyun.com/wang_xiao_ye/article/details/90023979

版权

前端专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了在iview组件库中正确嵌套使用Tabs组件的方法，强调了设置name和tab属性的重要性，以避免标签错乱的问题。通过正确示例和错误示例对比，帮助开发者理解并实践正确的嵌套技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iview中嵌套使用tabs注意事项

说明： iview组件中当嵌套使用 Tabs时，需要在Tabs中指定 name 属性来区分层级，然后在TabPane 中设置 tab 属性指向对应 Tabs 的 name 字段。

正确示例： 在每一个Tabs中都需要设置name属性，然后在其包含的所有直接TabPane中设置tab属性指向其对应的Tabs的 name 字段。

<Tabs name="tab1" >
  <TabPane label="标签1" tab="tab1">
    <Tabs name="tab1-1">
      <TabPane label="标签1-1" tab="tab1-1">标签1-1的内容</TabPane>
      <TabPane label="标签1-2" tab="tab1-1">标签1-2的内容</TabPane>
    </Tabs>
  </TabPane>
  <TabPane label="标签2" tab="tab1">
    <Tabs name="tab1-2">
      <TabPane label="标签2-1" tab="tab1-2">标签2-1的内容</TabPane>
      <TabPane label="标签2-2" tab="tab1-2">标签2-2的内容</TabPane>
    </Tabs>
  </TabPane>
</Tabs>

运行结果：
在这里插入图片描述

错误示例： 如果不设置 name 或 tab 属性，则会导致标签位置错乱。

<Tabs name="tab1" >
  <TabPane label="标签1" tab="tab1">
    <Tabs>
      <TabPane label="标签1-1" tab="tab1-1">标签1-1的内容</TabPane>
      <TabPane label="标签1-2" tab="tab1-1">标签1-2的内容</TabPane>
    </Tabs>
  </TabPane>
  <TabPane label="标签2" tab="tab1">
    <Tabs name="tab1-2">
      <TabPane label="标签2-1" >标签2-1的内容</TabPane>
      <TabPane label="标签2-2" tab="tab1-2">标签2-2的内容</TabPane>
    </Tabs>
  </TabPane>
</Tabs>

运行结果：
在这里插入图片描述