WTabs 标签页组件

A2UI Protocol JSON Schema

标签页组件，基于 WinDesignNext Tabs 封装，通过 dataSource 数据驱动自动渲染标签页，支持切换事件响应。可选 child 自定义每个标签面板内容。

基础用法

通过 child 引用一个模板组件，渲染到每个 <w-tab-pane> 中，可实现不同标签下的差异化内容（模板内通过 @row.xxx 访问当前标签数据）：

Props API

属性名	类型	默认值	说明
component	string	WTabs	组件类型（必填）
modelValue	object	—	当前激活标签的 name（A2UI 数据绑定）
type	string	—	风格：card / border-card-light / menu 等
tabPosition	string	top	标签位置：top / right / bottom / left
size	string	medium	尺寸：large / medium / small
closable	boolean	false	标签是否可关闭
addable	boolean	false	是否可增加标签
editable	boolean	false	是否可增删标签
stretch	boolean	false	标签宽度是否自撑开
simple	boolean	false	简单模式（无底线）
action	object	—	A2UI v0.9 事件定义
dataSource	string	—	标签数据数组路径
child	string	—	面板内容模板组件 ID，通过 @row.xxx 访问当前标签数据

path 支持说明

属性	支持 path	说明
modelValue	✅	双向绑定当前激活标签的 name
dataSource	✅	字符串路径，指向 dataModel 中的标签数组
模板内子组件	✅	使用 @row.xxx / @.$index 访问当前标签
action.event.context[].value	✅	事件上下文可引用 dataModel

绑定示例：

{
  "component": "WTabs",
  "modelValue": { "path": "/activeTab" },
  "dataSource": "/tabItems",
  "child": "tab-content-template"
}

数据格式

数据源数组

字段名	类型	必填	说明
label	string	是	标签标题
name	string | number	否	标签唯一标识，缺省用 value 或序号
value	string | number	否	同 name 的别名
disabled	boolean	否	是否禁用
lazy	boolean	否	是否延迟渲染面板
closable	boolean	否	是否可关闭

典型 JSON

{
  "id": "tabs_main",
  "component": "WTabs",
  "modelValue": { "path": "/activeTab" },
  "dataSource": "/tabItems",
  "type": "card",
  "child": "tab-content",
  "action": {
    "event": { "name": "onTabChange", "type": "tab-click" }
  }
}

注意事项

• child 模板渲染在 每个标签面板 内，通过 @row 获取当前标签项数据
• modelValue 绑定值为标签项的 name（或 value）
• 事件默认 type 为 tab-click，关闭标签时为 tab-remove