ElementUI浅尝辄止31:Tabs 标签页

选项卡组件:分隔内容上有关联但属于不同类别的数据集合。

常见于网站内容信息分类或app内容信息tab分类

1.如何使用?

Tabs 组件提供了选项卡功能,默认选中第一个标签页,你也可以通过 value 属性来指定当前选中的标签页。


2.选项卡样式

选项卡样式的标签页。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。


3.卡片化

卡片化的标签页。

将type设置为border-card。


  用户管理
  配置管理
  角色管理
  定时任务补偿

4.选项卡位置调整

可以通过 tab-position 设置标签的位置

标签一共有四个方向的设置 tabPosition="left|right|top|bottom"


5.自定义标签页

可以通过具名 slot 来实现自定义标签页的内容


  
     我的行程
    我的行程
  
  消息中心
  角色管理
  定时任务补偿

6.动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用


  
    {{item.content}}
  

 7.自定义增加标签页触发器

add tab
{{item.content}}

 

你可能感兴趣的:(element-ui,elementui)