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

相关文章
|
JavaScript 前端开发 Unix
|
4月前
|
移动开发 开发框架 前端开发
前端组件库Taro UI知识点大全(一)
教程来源 https://yyvgt.cn/category/jiuwenhua.html Taro UI是京东凹凸实验室打造的Taro多端框架专用UI组件库,支持微信/支付宝/百度小程序、H5及React Native。提供50+开箱即用组件,支持全局/按需引入与主题定制,显著提升跨端开发效率。
|
算法 数据挖掘 Python
使用Python实现K-means 算法-------文章中有源码
使用Python实现K-means 算法-------文章中有源码
465 0
使用Python实现K-means 算法-------文章中有源码
|
9月前
|
JSON 缓存 API
标题:京东平台获取商品SKU信息的API接口详解与使用指南
本文详细介绍京东商品SKU信息API接口,涵盖功能、调用流程、参数说明及返回格式。通过该接口可获取商品价格、库存、规格等关键数据,适用于电商开发与数据分析。内容包括应用注册、授权认证、签名生成、请求示例与错误处理,并提供Python调用示例,助力开发者高效集成京东商品数据。(238字)
1397 0
|
编解码 边缘计算 vr&ar
注视点渲染Foveated rendering是什么
Foveated rendering听起来好像是非常复杂的技术。但实际上注视点(foveation)的底层概念非常直接。使用人注视屏幕的信息,可以减少生成场景的运算资源,方式是使用高分辨率渲染人眼观看的小区哉,而场景外的其它区域(人的四周)采用更小的分辨率和更少的细节。注视点渲染主要用于显示技术,如VR头显和AR眼镜,对些场景资源优化至关重要。
983 1
|
Shell Linux 开发工具
Anaconda安装后报错 -bash: conda: command not found 如何处理
【6月更文挑战第20天】Anaconda安装后报错 -bash: conda: command not found 如何处理
2110 0
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
11880 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
9月前
|
存储 网络协议 数据挖掘
阿里云通用算力型u2i实例与u1性能与适用场景对比,以及2核4G、4核8G活动价格参考
通用算力型实例是阿里云推出主打性价比的云服务器实例规格,这类实例首先有企业级实例,采用固定CPU调度模式。通用算力型u1实例推出时间比较久了,u2i实例刚推出不久,算力性能超u1实例40%,开发测试成本直降75%。目前u1实例2核4G5M带宽199元一年,且续费价格不变。而通用算力型实例u2i目前也已经正式开启首次优惠,指定配置2.5折1年。有的用户不清楚他们之间的区别,本文为大家介绍这二个通用算力型实例的性能、适用场景和活动价格的对比,以供选择参考。
903 3
阿里云通用算力型u2i实例与u1性能与适用场景对比,以及2核4G、4核8G活动价格参考
|
存储 人工智能 弹性计算
通义万相AI绘画创作评测及图文搭建教程
【7月更文挑战第4天】阿里云的通义万相是AI绘画模型,结合ECS、OSS和API服务,提供无缝创作环境。用户上传图片至OSS,模型通过签名URL下载图片,然后生成AI艺术作品。模型服务具有高性能、易集成的特点,适用于多种场景如设计、广告等。用户可按指示在阿里云官网注册、充值、开通服务并部署。项目评测显示,其集成便捷、响应快、泛化能力强,但仍有改进空间,如增加图像控制选项和批量处理能力。相对于竞品,通义万相在成本、易用性和应用场景上有竞争力,值得推荐。
12846 9

热门文章

最新文章