184  
查询码:00001045
iview中嵌套使用tabs注意事项
作者: 陈婉 于 2020年06月22日 发布在分类 / 人防组 / 人防前端 下,并于 2020年06月22日 编辑
iview tabs

问题:

iview中嵌套使用tabs时,子tab内容填充到了父tabs上

粘贴图片

原因:

iview组件中当嵌套使用 Tabs时,需要在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>
粘贴图片





 推荐知识

 历史版本

修改日期 修改人 备注
2020-06-22 16:46:23[当前版本] 陈婉 创建版本

 附件

附件类型

PNGPNG

知识分享平台 -V 4.8.7 -wcp