V1.0.0
WinDesign A2UI Vue

WSelect 组件 ​

下拉选择组件，基于 WinDesignNext WSelect 封装，支持单选、多选、搜索过滤、远程加载等功能。

对象值绑定：文档示例统一使用对象值。选项 value 为对象时，需设置 valueKey 为对象内唯一标识字段（如 id、code）；modelValue 绑定完整对象（多选时为对象数组）。

基础用法 ​

Props API ​

属性名类型默认值说明
idstring-组件唯一标识（必填）
componentstringWSelect组件类型（必填）
optionsarray[]选项列表，每项含 value、label。与 dataSource 二选一
dataSourcestring-数据源路径，从数据模型动态加载选项。优先于 options
modelValueobject-绑定值（A2UI v0.9 数据绑定），单选为对象，多选为对象数组
placeholderstring''占位文本
sizestring'default'尺寸
disabledbooleanfalse是否禁用
clearablebooleanfalse是否可清空
multiplebooleanfalse是否多选
multipleLimitnumber0多选限制（0 为不限）
collapseTagsbooleanfalse多选时折叠标签
collapseTagsTooltipbooleanfalse折叠标签显示 tooltip
filterablebooleanfalse是否可搜索
allowCreatebooleanfalse是否允许创建新选项
remotebooleanfalse是否远程搜索
loadingbooleanfalse是否加载中
loadingTextstring'加载中'加载中文本
noMatchTextstring'无匹配数据'无匹配文本
noDataTextstring'暂无数据'无数据文本
valueKeystring'value'选项唯一标识属性名；选项 value 为对象时必填，指向对象内的唯一字段（如 id）
fitInputWidthbooleanfalse下拉宽度跟随输入框
statusstring''验证状态样式
tipsstring''提示信息
plainbooleanfalse朴素模式
tagTypestring'info'多选标签类型
tagEffectstring'light'多选标签主题
actionobject-A2UI v0.9 事件定义

path 支持说明 ​

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

属性支持 path说明
modelValue✅双向绑定选中值（单选为对象/基础类型，多选为数组）
dataSource✅字符串路径，从 dataModel 加载选项数组（优先于 options）
action.event.context[].value✅事件上下文可引用 dataModel
action.event.api.constParams[].value✅API 固定参数可引用 dataModel
options / placeholder / disabled 等❌静态配置；选项动态加载请用 dataSource

绑定示例：

json
{
  "valueKey": "id",
  "dataSource": "/deptOptions",
  "modelValue": { "path": "/selectedDept" },
  "action": {
    "event": {
      "name": "onDeptChange",
      "context": [{ "key": "dept", "value": { "path": "/selectedDept" } }]
    }
  }
}

options 选项配置 ​

options 是一个数组，每个选项对象包含：

json
{
  "valueKey": "id",
  "options": [
    { "value": { "id": "value1", "name": "显示文本1" }, "label": "显示文本1" },
    {
      "value": { "id": "value2", "name": "显示文本2" },
      "label": "显示文本2",
      "disabled": true
    }
  ]
}
字段类型必填说明
valueobject是选项值对象，配合 valueKey 做唯一匹配
labelstring/number是显示文本
disabledboolean否是否禁用该选项

modelValue 数据绑定 ​

modelValue 将选中值绑定到 dataModel，选中结果写回对应 path。选项 value 为对象时需同时配置 valueKey（与 WinDesignNext Select value-key 一致）。

json
// 单选
{ "modelValue": { "path": "/selectedDept" } }

// 多选（对象数组）
{ "modelValue": { "path": "/selectedDepts" } }

当用户选择时，组件自动将完整选项 value 对象同步到 dataModel（多选时为对象数组）。

json
{
  "id": "select_dept",
  "component": "WSelect",
  "placeholder": "请选择科室",
  "valueKey": "id",
  "clearable": true,
  "dataSource": "/deptOptions",
  "modelValue": { "path": "/selectedDept" },
  "action": {
    "event": {
      "name": "onDeptChange",
      "context": [{ "key": "dept", "value": { "path": "/selectedDept" } }]
    }
  }
}

配合 updateDataModel：

json
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "selectedDept": { "id": "dept_1", "code": "NK", "name": "内科" },
      "deptOptions": [
        {
          "value": { "id": "dept_1", "code": "NK", "name": "内科" },
          "label": "内科"
        },
        {
          "value": { "id": "dept_2", "code": "WK", "name": "外科" },
          "label": "外科"
        }
      ]
    }
  }
}

action 定义 ​

json
{
  "action": {
    "event": {
      "name": "onSelectChange",
      "context": [{ "key": "value", "value": { "path": "/selectedCity" } }]
    }
  }
}

选择项变化时触发，默认 type 为 change。

dataSource 动态选项 ​

dataSource 用于从数据模型中动态加载选项列表，适用于选项需要由后端接口返回或由其他组件逻辑动态生成的场景。

  • dataSource 与 options 二选一，设置 dataSource 后优先使用数据模型中的数据
  • dataSource 的值为数据模型中的路径（如 /cityOptions）
  • 数据模型中对应路径的值应为数组，数组项格式与 options 一致（包含 value 和 label）
json
// 配置组件
{
  "id": "select_dynamic",
  "component": "WSelect",
  "placeholder": "请选择",
  "valueKey": "code",
  "dataSource": "/cityOptions",
  "modelValue": { "path": "/selectedCity" }
}

// 在 updateDataModel 中设置选项数据
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "cityOptions": [
        { "value": { "code": "bj", "name": "北京" }, "label": "北京" },
        { "value": { "code": "sh", "name": "上海" }, "label": "上海" },
        { "value": { "code": "gz", "name": "广州" }, "label": "广州" }
      ],
      "selectedCity": null
    }
  }
}

使用示例 ​

基础单选 ​

json
{
  "id": "select_001",
  "component": "WSelect",
  "placeholder": "请选择科室",
  "clearable": true,
  "options": [
    { "value": "cardiology", "label": "心内科" },
    { "value": "neurology", "label": "神经内科" },
    { "value": "orthopedics", "label": "骨科" }
  ],
  "modelValue": { "path": "/selected" },
  "action": {
    "event": { "name": "onSelect" }
  }
}

多选模式 ​

json
{
  "id": "select_002",
  "component": "WSelect",
  "placeholder": "请选择（多选）",
  "multiple": true,
  "collapseTags": true,
  "clearable": true,
  "options": [
    { "value": "1", "label": "选项1" },
    { "value": "2", "label": "选项2" },
    { "value": "3", "label": "选项3" }
  ],
  "modelValue": { "path": "/multiSelected" },
  "action": {
    "event": { "name": "onMultiSelect" }
  }
}

可搜索选择 ​

json
{
  "id": "select_003",
  "component": "WSelect",
  "placeholder": "请搜索",
  "filterable": true,
  "clearable": true,
  "options": [
    { "value": "beijing", "label": "北京" },
    { "value": "shanghai", "label": "上海" },
    { "value": "guangzhou", "label": "广州" }
  ],
  "modelValue": { "path": "/city" },
  "action": {
    "event": { "name": "onCitySelect" }
  }
}

配合 WForm 使用 ​

json
[
  {
    "id": "form_item_city",
    "component": "WFormItem",
    "label": "就诊科室",
    "children": ["select_dept"]
  },
  {
    "id": "select_dept",
    "component": "WSelect",
    "placeholder": "请选择科室",
    "clearable": true,
    "options": [
      { "value": "cardiology", "label": "心内科" },
      { "value": "neurology", "label": "神经内科" },
      { "value": "orthopedics", "label": "骨科" }
    ],
    "modelValue": { "path": "/dept" },
    "action": {
      "event": {
        "name": "onDeptChange",
        "context": [{ "key": "dept", "value": { "path": "/dept" } }]
      }
    }
  }
]

对象值选择 ​

选项 value 为对象时，通过 valueKey 指定唯一标识字段，modelValue 绑定完整对象：

json
{
  "id": "select_dept",
  "component": "WSelect",
  "placeholder": "请选择科室",
  "valueKey": "id",
  "clearable": true,
  "dataSource": "/deptOptions",
  "modelValue": { "path": "/selectedDept" },
  "action": {
    "event": {
      "name": "onDeptChange",
      "context": [{ "key": "dept", "value": { "path": "/selectedDept" } }]
    }
  }
}

动态数据源（dataSource） ​

通过 dataSource 从数据模型中动态加载选项，适合选项由后端接口返回的场景：

json
{
  "id": "select_dynamic",
  "component": "WSelect",
  "placeholder": "请选择科室",
  "clearable": true,
  "filterable": true,
  "dataSource": "/deptOptions",
  "modelValue": { "path": "/selectedDept" },
  "action": {
    "event": {
      "name": "onDeptChange",
      "context": [{ "key": "dept", "value": { "path": "/selectedDept" } }]
    }
  }
}

配合 updateDataModel 提供初始选项数据：

json
{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "cityOptions": [
        { "value": "bj", "label": "北京" },
        { "value": "sh", "label": "上海" },
        { "value": "gz", "label": "广州" }
      ],
      "selectedCity": ""
    }
  }
}

事件处理 ​

选择变化事件 ​

用户选择时自动触发，context 携带当前选中值：

typescript
processor.onEvent((event) => {
  const eventName = event.message.userAction?.name;
  const context = event.message.userAction?.context;

  if (eventName === 'onSelectChange') {
    // context: { value: "选中的值" } 或 { value: { id: "...", name: "..." } }
    console.log('选中值:', context);
    event.resolve([]);
  }
});

数据同步 ​

WSelect 在选择时会自动将值同步到 dataModel：

  1. 用户选择 → 更新本地值
  2. 通过 setData(component, modelValue.path, val, surfaceId) 同步到 dataModel
  3. 发送 action.event 事件
  4. 其他组件可通过 path 读取最新值
json
// WButton 提交时读取 WSelect 的最新值
{
  "action": {
    "event": {
      "name": "onSubmit",
      "context": [{ "key": "city", "value": { "path": "/city" } }]
    }
  }
}

Design by UED