• Tabs 标签页
    • 基础用法
    • 选项卡样式
    • 可关闭
    • 卡片化
    • 自定义标签页
    • 动态增减标签页
    • 动态添加标签页
    • Tabs Attributes
    • Tabs Events
    • Tabs.Pane Attributes

    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