V1.0.0
WinDesign A2UI Vue

WiListTableSelect 列表选择器组件 ​

列表选择器组件，基于 WinDesignAI WiListTableSelect 封装，通过数据驱动渲染多个表格选择器组件，适用于批量选择场景。

注意：必须配置 columns 才能正确渲染下拉表格。

基础用法 ​

通过 items 配置多个表格选择器，使用 columns 定义下拉表格列，modelValue 绑定选择结果（对象格式，key 对应 items 中每个配置项的 key 字段）。

添加/删除输入框（dataSource） ​

使用 dataSource 配合 addable 和 deletable 实现动态添加/删除选择器输入框。

  • dataSource - 指向数据模型中的 items 配置数组路径
  • addable - 显示添加按钮，点击触发事件
  • deletable - 显示删除按钮，点击会删除整个输入框

外层通过 event.resolve() 更新 dataSource 来添加/删除输入框配置。

互斥选择： 多个输入框共享同一批选项时，某个输入框已选中的数据应从其他输入框的 options 中排除。选择变更、添加、删除后都需要重新计算各输入框的可选项。

Props API ​

属性 ​

属性名说明类型可选值默认值
modelValue绑定值，对象格式，key 对应 items 中每个配置项的 key 字段object-{}
dataSourceA2UI 格式的数据路径引用，指向数据模型中的 ListTableSelectItem 配置数组string--
items列表选择项配置数组（与 dataSource 二选一）ListTableSelectItem[]-[]
disabled禁用所有选择器boolean-false
size全局尺寸设置，会被 item 中的 size 覆盖stringsmall / default / largedefault
clearable全局可清空设置，会被 item 中的 clearable 覆盖boolean-false
deletable全局可删除设置，点击删除按钮会移除整个输入框boolean-false
addable显示添加按钮，点击可添加新的选择器输入框boolean-false
layout布局方式stringhorizontal / verticalhorizontal
columnGap水平布局时的列间距(px)number-16
rowGap垂直布局时的行间距(px)number-16
actionA2UI v0.9 事件配置object--

path 支持说明 ​

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

属性支持 path说明
modelValue✅双向绑定选中值对象（key 对应各 item 的 key 字段）
dataSource✅字符串路径，指向 items 配置数组（与 items 二选一，优先 dataSource）
action.event.context[].value✅事件上下文可引用 dataModel
items / layout / disabled 等❌静态配置；动态 items 请用 dataSource

绑定示例：

json
{
  "component": "WiListTableSelect",
  "dataSource": "/selectItems",
  "modelValue": { "path": "/selectedValues" },
  "action": {
    "event": {
      "name": "onChange",
      "context": [{ "key": "selected", "value": { "path": "/selectedValues" } }]
    }
  }
}

ListTableSelectItem 配置 ​

属性名说明类型可选值默认值
key选择器的唯一标识，对应 modelValue 中的字段名string--
label标签文本string--
placeholder占位文本string--
options下拉选项数据object[]--
columns下拉表格的列定义（必须配置）Column[]--
props选项字段映射配置object--
disabled是否禁用该选择器boolean-false
clearable是否可清空选中数据boolean-false
multiple是否多选boolean-false
size该选择器的尺寸stringsmall / default / large-
deletable是否显示删除按钮，点击会删除整个输入框boolean-false
tableWidth下拉表格的宽度number--
tableMaxHeight下拉表格的最大高度number--
placement弹出层位置string见 Placement 类型-
popperClass弹出层自定义 CSS 类名string--

columns 列配置（必须配置） ​

属性名说明类型默认值
prop列字段名string-
label列标题string-
width列宽度number-

props 字段映射配置 ​

属性名说明类型默认值
label选项中用于显示的字段名stringlabel
value选项中用于绑定的字段名stringvalue
disabled选项中用于标识禁用的字段名stringdisabled
prefixLabel选项中用于在输入框显示前置标签的字段名string-

事件 ​

所有事件使用同一个 action.event.name，通过 type 区分事件类型：

type说明context 参数
change选择值变化时触发包含 selectedValues
add点击添加按钮时触发包含 selectedValues
remove删除整个输入框时触发包含 selectedValues 和 removedKey

外部事件处理中通过 event.message.userAction?.type 区分：

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

  if (eventName === 'onChange') {
    if (eventType === 'change') {
      // 选择值变化
      console.log('选择变更:', context?.selectedValues);
    } else if (eventType === 'add') {
      // 点击添加按钮
      console.log('添加新输入框');
    } else if (eventType === 'remove') {
      // 删除输入框
      const removedKey = context?.removedKey;
      console.log('删除输入框:', removedKey);
    }
  }
});

多个组件可通过 sourceComponentId 区分来源：

typescript
const sourceId = event.message.userAction?.sourceComponentId;

clearable 与 deletable 区别 ​

属性作用效果
clearable清空已选数据，输入框仍保留仅清除选中值
deletable删除整个输入框，连同数据一起移除移除整个选择器

dataSource vs items ​

属性使用场景特点
items静态配置，初始化时确定直接配置，不可动态更新
dataSource动态配置，需要增删改通过数据模型动态更新

使用 dataSource 的正确顺序：

  1. createSurface - 创建渲染表面
  2. updateDataModel - 先设置 dataSource 数据（items 配置数组）
  3. updateComponents - 再创建组件，引用 dataSource

action 配置 ​

通过 action 属性配置 A2UI v0.9 格式的事件处理。所有事件使用同一个 name，通过 type 区分（change、add、remove）：

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

事件 type 说明：

type触发时机context 内容
change选择值变化时selectedValues
add点击添加按钮时selectedValues
remove点击删除按钮时selectedValues + removedKey

Design by UED