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
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
516 0
|
JavaScript 网络架构
用js动态添加select标签的option
js代码: var featureLayerURLTest=[["http://192.168.15.174:6080/arcgis/rest/services/Sample/GQYDGH/FeatureServer...
1284 0
|
9月前
|
JavaScript
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
Vue自定义组件实现类似elementUI的append-to-body功能,将创建的元素插入、挂载到body上面(网页最外层),适用于父元素overflow: hidden、绝对定位fixed的场景
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
82 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
54 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
86 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之3
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之3
63 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之6
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之6
76 0
|
9月前
element-Cascader级联选择器用法?
element-Cascader级联选择器用法?

热门文章

最新文章