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

相关文章
|
6月前
|
测试技术
【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
|
容器
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
1673 0
|
4月前
|
前端开发
CSS 实现动态显示隐藏(:checked 和 :target 的妙用)
CSS 实现动态显示隐藏(:checked 和 :target 的妙用)
32 0
|
6月前
|
小程序 前端开发 定位技术
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
element Plus 表格嵌套其他组件的使用
element Plus 表格嵌套其他组件的使用
189 0
|
JavaScript
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
481 0
|
前端开发 JavaScript 数据格式
el-menu导航菜单的二次封装(递归组件)实现动态多级菜单
el-menu导航菜单的二次封装(递归组件)实现动态多级菜单
636 0
|
前端开发
React Navigation5.0系列四:Nesting navigators(嵌套导航)
React Navigation5.0系列四:Nesting navigators(嵌套导航)
264 0
React Navigation5.0系列四:Nesting navigators(嵌套导航)
|
小程序 前端开发 JavaScript
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件