WTableSelect 组件

A2UI Protocol JSON Schema

下拉表格选择组件，基于 WinDesignNext TableSelect 封装，在下拉面板内以表格形式展示选项，适合需要同时展示多列信息（如编码、名称、规格）的选取场景。

与 WSelect 的区别：WTableSelect 下拉内容为表格，需同时配置 columns（列定义）和 options/dataSource（行数据）。

基础用法

API

属性	类型	说明
component	string	固定为 WTableSelect
modelValue	DataBindingValue	选中值，支持 path 双向绑定
options	array	静态行数据，与 dataSource 二选一
dataSource	string	从 dataModel 加载行数据的路径
columns	array	表格列定义，与 columnsSource 二选一
columnsSource	string	从 dataModel 加载列定义的路径
props	object | DataBindingValue	字段映射（label/value/disabled 键名）
tableWidth	number | string | DataBindingValue	下拉表格宽度
tableMaxHeight	number | string | DataBindingValue	下拉表格最大高度
valueKey	string	对象选项的唯一键字段
multiple	boolean	是否多选
filterable	boolean	是否可搜索
action	Action	选择变化事件

path 支持说明

属性	path 支持	说明
modelValue	✅	选中值双向绑定
dataSource	✅（路径字符串）	行数据数组路径
columnsSource	✅（路径字符串）	列定义数组路径
props	✅	字段映射配置
tableWidth	✅	表格宽度
tableMaxHeight	✅	表格最大高度

modelValue 数据绑定

{ "modelValue": { "path": "/drugCode" } }

动态行数据与列定义

{
  "component": "WTableSelect",
  "dataSource": "/drugList",
  "columnsSource": "/drugColumns",
  "modelValue": { "path": "/selectedDrug" },
  "props": { "label": "name", "value": "code" }
}

action 定义

{
  "action": {
    "event": {
      "name": "onDrugChange",
      "type": "change",
      "context": [{ "key": "drugCode", "value": { "path": "/drugCode" } }]
    }
  }
}

数据同步机制

1. Agent 定义组件并设置 modelValue.path
2. Agent 通过 updateDataModel 初始化行数据和列定义
3. 用户选择后，渲染器自动 setData 写回 dataModel
4. 配置了 action 时触发 A2UI 事件

使用场景

场景	推荐配置
药品/物资选取	columns 展示编码+名称+规格
动态数据列表	dataSource + columnsSource
多选	multiple: true
对象值绑定	valueKey + props 字段映射

注意事项

• columns 与 options/dataSource 需同时配置，缺一不可
• 行数据字段名需与 columns[].prop 及 props.label/props.value 对应
• A2UI JSON 不支持 remoteMethod、filterMethod 等函数属性