nginx反向代理 makefile constructor matlab向上取整 progressjs jq选择第一个子元素 idea生成main方法 虚拟机重启命令 webform开发教程 python调用方法 python环境安装教程 python中pop函数 java开发环境 java的数据类型 java定义字符串 linux简介 python开发实例 js删除数组指定元素 主板排名天梯图 c语言表白代码 图片生成网址 自动喊话器 JScodeblocks汉化包 ip地址转换器 mac画图工具 abr文件 手机电脑模拟器 爱奇艺无法投屏 方正兰亭粗黑字体下载 什么是人肉搜索 砸金蛋抽奖活动 华为杂志锁屏怎么设置 黑域怎么用 php完全自学手册 js文件上传插件 小米开发者选项 樱桃b站怎么发动态 外星人r7 俄罗斯方块java 战地4配置要求
当前位置: 首页 > 学习教程  > 编程语言

iview中嵌套使用tabs注意事项

2020/12/28 19:48:36 文章标签:

说明: iview组件中当嵌套使用 Tabs时,需要在Tabs中指定 name 属性来区分层级,然后在TabPane 中设置 tab 属性指向对应 Tabs 的 name 字段。 正确示例: 在每一个Tabs中都需要设置name属性,然后在其包含的所有直接TabPa…

说明: 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>

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

https://blog.csdn.net/wang_xiao_ye/article/details/90023979


本文链接: http://www.dtmao.cc/news_show_550390.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?