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

相关文章
element-ui中Select 选择器异步加载下一页
element-ui中Select 选择器异步加载下一页
|
8月前
|
测试技术
【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
83 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
72 0
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之4
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之4
52 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之3
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之3
61 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之6
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之6
74 0
|
JavaScript
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
505 0
|
JavaScript
VUE element-ui之el-table表格内嵌进度条功能实现
VUE element-ui之el-table表格内嵌进度条功能实现
1585 0
VUE element-ui之el-table表格内嵌进度条功能实现
|
JavaScript 数据库
EasyUI_datagrid实现动态加载列并为其绑定数据
EasyUI_datagrid实现动态加载列并为其绑定数据
698 0