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

相关文章
|
SQL 机器学习/深度学习 数据采集
Apache Doris Broker数据导入使用示例及介绍
Broker load 是一个异步的导入方式,支持的数据源取决于 Broker 进程支持的数据源。用户需要通过 MySQL 协议 创建 Broker load 导入,并通过查看导入命令检查导入结果。
1935 0
Apache Doris Broker数据导入使用示例及介绍
|
开发框架 小程序
uniApp——Eslint报错'uni' is not defined
uniApp——Eslint报错'uni' is not defined
670 0
|
数据库
element多选框select下拉框数据回显的问题value.push is not a function
element多选框select下拉框数据回显的问题value.push is not a function
1280 1
|
移动开发 JavaScript 小程序
uView Radio 单选框
uView Radio 单选框
362 0
|
前端开发
CSS动画(动态导航栏)
CSS动画(动态导航栏)
|
Ubuntu 数据安全/隐私保护
解决新装好的ubuntu没有root权限
解决新装好的ubuntu没有root权限
|
编解码 边缘计算 vr&ar
注视点渲染Foveated rendering是什么
Foveated rendering听起来好像是非常复杂的技术。但实际上注视点(foveation)的底层概念非常直接。使用人注视屏幕的信息,可以减少生成场景的运算资源,方式是使用高分辨率渲染人眼观看的小区哉,而场景外的其它区域(人的四周)采用更小的分辨率和更少的细节。注视点渲染主要用于显示技术,如VR头显和AR眼镜,对些场景资源优化至关重要。
544 1