V1.0.0
WinDesign A2UI Vue

WCheckboxGroup 复选框组组件 ​

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

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

基础用法 ​

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

Props API ​

属性名类型默认值说明
idstring-组件唯一标识（必填）
componentstringWCheckboxGroup组件类型（必填）
modelValueobject-绑定值（A2UI v0.9 数据绑定），选中项 value 数组，支持基础类型和对象值
disabledbooleanfalse是否禁用所有复选框
minnumber-可被选中的最小数量
maxnumber-可被选中的最大数量
tagstringdiv自定义元素标签
actionobject-A2UI v0.9 事件定义
dataSourcestring-数据源路径，指向 dataModel 中的选项数据数组
childstring-模板组件 ID，渲染到 w-checkbox 插槽，通过 @row.xxx 访问当前选项数据

path 支持说明 ​

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

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

绑定示例：

json
{
  "component": "WCheckboxGroup",
  "modelValue": { "path": "/selectedTeams" },
  "dataSource": "/teams"
}

数据格式 ​

数据源数组 ​

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

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

基础示例（无 child） ​

json
[
  {
    "id": "team-checkbox",
    "component": "WCheckboxGroup",
    "modelValue": { "path": "/selectedTeams" },
    "dataSource": "/teams",
    "action": {
      "event": { "name": "onTeamChange" }
    }
  }
]

对应数据：

json
{
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/teams",
    "value": [
      { "label": "李医生团队", "value": "team_1" },
      { "label": "张医生团队", "value": "team_2" },
      { "label": "王医生团队", "value": "team_3" }
    ]
  }
}

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

json
[
  {
    "id": "team-checkbox",
    "component": "WCheckboxGroup",
    "modelValue": { "path": "/selectedTeams" },
    "dataSource": "/teams",
    "child": "checkbox-slot",
    "action": {
      "event": { "name": "onTeamChange" }
    }
  },
  {
    "id": "checkbox-slot",
    "component": "WSpace",
    "children": ["checkbox-label", "checkbox-tag"]
  },
  {
    "id": "checkbox-label",
    "component": "Text",
    "text": { "path": "@row.label" },
    "variant": "body"
  },
  {
    "id": "checkbox-tag",
    "component": "WTag",
    "type": "success",
    "child": "checkbox-tag-text"
  },
  {
    "id": "checkbox-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-checkbox> 的 :value 绑定为 item 而非 item.value）。此时 modelValue 对应的数据是对象数组。

json
{
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "selectedTeams": [
        { "label": "李医生团队", "value": "team_1", "tag": "最优" }
      ],
      "teams": [
        { "label": "李医生团队", "value": "team_1" },
        { "label": "张医生团队", "value": "team_2" }
      ]
    }
  }
}

Design by UED