V1.0.0
WinDesign A2UI Vue

WRadioGroup 单选框组组件 ​

单选框组组件，基于 WinDesignNext Radio 封装，通过 dataSource 数据驱动自动渲染选项，支持选择事件响应。可选 child 自定义 radio 插槽内容。

对象值模式：当数据源的 value 字段为对象时（非基础类型），组件会自动以整个选项对象作为匹配值，无需额外配置。

基础用法 ​

通过 child 引用一个模板组件，渲染到 <w-radio> 的默认插槽中，可实现自定义选项内容（如加标签、图标等）：

Props API ​

属性名类型默认值说明
idstring-组件唯一标识（必填）
componentstringWRadioGroup组件类型（必填）
modelValueobject-绑定值（A2UI v0.9 数据绑定），选中项的 value 值，支持基础类型和对象值
disabledbooleanfalse是否禁用所有单选框
namestring-原生 name 属性
ariaLabelstring-aria-label 属性
allowDeselectbooleantrue允许点击已选中项取消选择
actionobject-A2UI v0.9 事件定义
dataSourcestring-数据源路径，指向 dataModel 中的选项数据数组
childstring-模板组件 ID，渲染到 w-radio 插槽，通过 @row.xxx 访问当前选项数据

path 支持说明 ​

通用绑定格式见 path 数据绑定速查。

属性支持 path说明
modelValue✅双向绑定选中项的 value（基础类型或对象）
dataSource✅字符串路径，指向 dataModel 中的选项数组
模板内子组件✅使用 @row.xxx / @.$index 访问当前选项
action.event.context[].value✅事件上下文可引用 dataModel
disabled / name 等❌静态配置

绑定示例：

json
{
  "component": "WRadioGroup",
  "modelValue": { "path": "/selectedGender" },
  "dataSource": "/genders",
  "child": "radio-slot"
}

数据格式 ​

数据源数组 ​

数据数组中每个对象支持的字段：

字段名类型必填说明
labelstring是选项显示文本
valuestring | object是选项值，支持基础类型或对象
disabledboolean否是否禁用

基础示例（无 child） ​

json
[
  {
    "id": "gender-radio",
    "component": "WRadioGroup",
    "modelValue": { "path": "/selectedGender" },
    "dataSource": "/genders",
    "action": {
      "event": { "name": "onGenderChange" }
    }
  }
]

对应数据：

json
{
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/genders",
    "value": [
      { "label": "男性", "value": "male" },
      { "label": "女性", "value": "female" },
      { "label": "其他", "value": "other" }
    ]
  }
}

自定义插槽示例（有 child） ​

json
[
  {
    "id": "gender-radio",
    "component": "WRadioGroup",
    "modelValue": { "path": "/selectedGender" },
    "dataSource": "/genders",
    "child": "radio-slot",
    "action": {
      "event": { "name": "onGenderChange" }
    }
  },
  {
    "id": "radio-slot",
    "component": "WSpace",
    "children": ["radio-label", "radio-tag"]
  },
  {
    "id": "radio-label",
    "component": "Text",
    "text": { "path": "@row.label" },
    "variant": "body"
  },
  {
    "id": "radio-tag",
    "component": "WTag",
    "type": "primary",
    "child": "radio-tag-text"
  },
  {
    "id": "radio-tag-text",
    "component": "Text",
    "text": { "path": "@row.tag" },
    "variant": "body"
  }
]

模板数据绑定：

路径格式说明示例
@row.xxx访问当前选项的字段@row.label → "男性"
@row.xxx.yyy访问嵌套字段@row.address.city
@.$index访问当前选项的索引@.$index → 0

对象值模式 ​

当数据源中 value 字段为对象时（非基础类型 string/number/boolean），组件自动以整个选项对象作为选中值（<w-radio> 的 :value 绑定为 item 而非 item.value）。此时 modelValue 对应的数据也是完整对象。

json
{
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "selectedGender": {
        "label": "女性",
        "value": "female",
        "tag": "推荐"
      },
      "genders": [
        { "label": "男性", "value": "male" },
        { "label": "女性", "value": "female" }
      ]
    }
  }
}
``` |

Design by UED