Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

Tabs 标签页 - 图1

选项卡样式

选项卡样式的标签页。

Tabs 标签页 - 图2

可关闭

可以关闭标签页。

Tabs 标签页 - 图3

卡片化

卡片化的标签页。

Tabs 标签页 - 图4

自定义标签页

可以通过 node 类型来实现自定义标签页的内容。

Tabs 标签页 - 图5

动态增减标签页

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

Tabs 标签页 - 图6

动态添加标签页

Tabs 标签页 - 图7

Tabs Attributes

参数说明类型可选值默认值
type风格类型stringcard, border-card
closable标签是否可关闭boolean-false
addable标签是否可增加boolean-false
editable标签是否同时可增加和关闭boolean-false
activeName选中选项卡的 namestring第一个选项卡的 name
value绑定值,选中选项卡的namestring第一个选项卡的 name

Tabs Events

事件名称说明回调参数
onTabClicktab 被选中时触发被选中的标签 tab 实例
onTabRemove点击 tab 移除按钮后触发被删除的标签的 name
onTabAdd点击 tabs 的新增按钮后触发-
onTabEdit点击 tabs 的新增按钮或 tab 被关闭后触发(targetName, action)

Tabs.Pane Attributes

参数说明类型可选值默认值
label选项卡标题string,node
disabled是否禁用booleanfalse
name与选项卡 activeName 对应的标识符,表示选项卡别名string该选项卡在选项卡列表中的顺序值,如第一个选项卡则为'1'
closable标签是否可关闭booleanfalse