iview中嵌套使用tabs注意事项

简介: 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>

image.png
image.png

错误示例: 如果不设置 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>

image.png

image.png

相关文章
|
1月前
|
存储 网络协议 数据挖掘
阿里云通用算力型u2i实例与u1性能与适用场景对比,以及2核4G、4核8G活动价格参考
通用算力型实例是阿里云推出主打性价比的云服务器实例规格,这类实例首先有企业级实例,采用固定CPU调度模式。通用算力型u1实例推出时间比较久了,u2i实例刚推出不久,算力性能超u1实例40%,开发测试成本直降75%。目前u1实例2核4G5M带宽199元一年,且续费价格不变。而通用算力型实例u2i目前也已经正式开启首次优惠,指定配置2.5折1年。有的用户不清楚他们之间的区别,本文为大家介绍这二个通用算力型实例的性能、适用场景和活动价格的对比,以供选择参考。
509 3
阿里云通用算力型u2i实例与u1性能与适用场景对比,以及2核4G、4核8G活动价格参考
|
10月前
|
机器学习/深度学习 运维 数据可视化
《生成对抗网络:网络安全态势感知可视化的新引擎》
在数字化时代,网络安全至关重要。网络安全态势感知可视化通过直观展示网络状况,帮助快速发现威胁。生成对抗网络(GANs)作为前沿AI技术,正为这一领域带来变革。GANs由生成器和判别器组成,通过对抗训练生成逼真数据,用于数据增强、异常检测、威胁情报合成及动态场景模拟。尽管面临数据隐私、模型稳定性和可解释性等挑战,GANs的应用前景广阔,有望大幅提升网络安全水平。
451 22
|
人工智能 自然语言处理 搜索推荐
谈谈Function Calling
Function Calling赋予大语言模型调用外部工具的能力,弥补其缺乏行动力、信息滞后等缺陷。它像“指挥家”般,理解用户意图,选择合适的工具执行操作,并将结果反馈给用户,从而连接虚拟与现实。这一机制让大语言模型如虎添翼,更好地服务于人类。
800 3
谈谈Function Calling
Proteus 8 Professional安装教程
Proteus 8 Professional安装教程
1759 0
|
前端开发
CSS动画(动态导航栏)
CSS动画(动态导航栏)
|
Shell Linux 开发工具
Anaconda安装后报错 -bash: conda: command not found 如何处理
【6月更文挑战第20天】Anaconda安装后报错 -bash: conda: command not found 如何处理
1318 0
|
移动开发 JavaScript 小程序
uView Radio 单选框
uView Radio 单选框
417 0
|
JavaScript 容器
【vue】 vue2 qrcodejs2链接生成二维码
【vue】 vue2 qrcodejs2链接生成二维码
639 0