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

相关文章
|
5月前
|
移动开发 开发框架 前端开发
前端组件库Taro UI知识点大全(一)
教程来源 https://yyvgt.cn/category/jiuwenhua.html Taro UI是京东凹凸实验室打造的Taro多端框架专用UI组件库,支持微信/支付宝/百度小程序、H5及React Native。提供50+开箱即用组件,支持全局/按需引入与主题定制,显著提升跨端开发效率。
|
Java 数据库连接 开发者
Mybatis Plus公共字段自动填充(MyMetaObjectHandler)
Mybatis Plus公共字段自动填充(MyMetaObjectHandler)
1484 0
|
4月前
|
人工智能 前端开发 测试技术
Qoder Skills 完全指南:从零开始,让 AI 按你的标准执行
文章内容基于作者个人技术实践与独立思考,旨在分享经验,仅代表个人观点。
3187 3
|
10月前
|
JSON 缓存 API
标题:京东平台获取商品SKU信息的API接口详解与使用指南
本文详细介绍京东商品SKU信息API接口,涵盖功能、调用流程、参数说明及返回格式。通过该接口可获取商品价格、库存、规格等关键数据,适用于电商开发与数据分析。内容包括应用注册、授权认证、签名生成、请求示例与错误处理,并提供Python调用示例,助力开发者高效集成京东商品数据。(238字)
1461 0
|
10月前
|
存储 网络协议 数据挖掘
阿里云通用算力型u2i实例与u1性能与适用场景对比,以及2核4G、4核8G活动价格参考
通用算力型实例是阿里云推出主打性价比的云服务器实例规格,这类实例首先有企业级实例,采用固定CPU调度模式。通用算力型u1实例推出时间比较久了,u2i实例刚推出不久,算力性能超u1实例40%,开发测试成本直降75%。目前u1实例2核4G5M带宽199元一年,且续费价格不变。而通用算力型实例u2i目前也已经正式开启首次优惠,指定配置2.5折1年。有的用户不清楚他们之间的区别,本文为大家介绍这二个通用算力型实例的性能、适用场景和活动价格的对比,以供选择参考。
995 3
阿里云通用算力型u2i实例与u1性能与适用场景对比,以及2核4G、4核8G活动价格参考
|
JavaScript 前端开发 Unix
|
物联网 5G
Wi-Fi 7:主要功能、优势和与前代的改进
【8月更文挑战第23天】
1856 0
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
11990 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
Proteus 8 Professional安装教程
Proteus 8 Professional安装教程
3368 0

热门文章

最新文章