Combo 组合

用于将多个表单项组合到一起，实现深层结构的数据编辑。

比如想提交 user.name 这样的数据结构，有两种方法：一种是将表单项的 name 设置为user.name，另一种就是使用 combo。

基本使用

配置items属性，组合多个表单项

多行展示模式

默认，combo 内表单项是横着展示一排，如果想换行展示，可以配置"multiLine": true

多选模式

默认，combo 为单选模式，可以配置"multiple": true实现多选模式。

这时提交的将会是对象数组。

限制个数

多选模式下，可以配置minLength和maxLength配置该 Combo 可添加的条数

也可以使用变量配置minLength和maxLength

2.4.1 及以上版本

值格式

观察下例中表单数据域值的变化，可以发现：

• 单选模式时，数据格式为对象；
• 多选模式时，数据格式为数组，数组成员是对象

打平值

默认多选模式下，数据格式是对象数组的形式，当你配置的组合中只有一个表单项时，可以配置"flat": true，将值进行打平处理。

查看上例表单数据域，可以看到打平后数据格式如下：

{
  "combo2": ["aaa", "bbb"]
}

增加层级

combo 还有一个作用是增加层级，比如返回的数据是一个深层对象

{
  "a": {
    "b": "data"
  }
}

如果要用文本框显示，name 必须是 a.b，但使用 combo 创建层级后，name 就可以只是 b：

{
  "name": "a",
  "type": "combo",
  "label": "",
  "noBorder": true,
  "multiLine": true,
  "items": [
    {
      "type": "input-text",
      "name": "b"
    }
  ]
}

这样就能结合 definitions 实现无限层级结构。

唯一验证

可以在配置的body项上，配置"unique": true，指定当前表单项不可重复

上例中，text和select都配置了"unique": true，新增多条 combo，在任意两个text输入框的值相同时，提交时都会报错"当前值不唯一"，而select选择框也不可选择重复的选项

暂不支持 Nested-Select 组件

拖拽排序

多选模式下，可以配置"draggable": true实现拖拽调整排序

条件分支

默认 Combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。

如下面的例子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。

• conditions Array 数组，每个成员是一种类型
• conditions[x].label 类型名称
• conditions[x].test 表达式，目标成员数据是否属于这个类型？
• conditions[x].scaffold 初始数据，当新增的时候直接使用此数据。
• conditions[x].items 该类型的表单设置。
• typeSwitchable 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。

Tabs 模式

默认成员是一个一个排列的，如果数据比较多有点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。

• tabsMode boolean 用来开启此模式
• tabsStyle string 样式，可选：line、card 或者 radio.
• tabsLabelTpl 用来生成标题的模板，默认为：成员 ${index|plus}

注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。

获取父级数据

默认情况下，Combo 内表达项无法获取父级数据域的数据，如下，我们添加 Combo 表单项时，尽管 Combo 内的文本框的name与父级数据域中的super_text变量同名，但是没有自动映射值。

可以配置"canAccessSuperData": true开启此特性，如下，配置了该配置项后，添加 Combo 的text表单项会自动映射父级数据域的同名变量

同步更新内部表单项

配置canAccessSuperData可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的

如下，添加一组 combo，然后可以看到默认会映射父级变量值123，但是当你在更改父级数据域super_text文本框值后，combo 内部文本框并没有同步更新

如果想实现内部同步更新，需要如下配置：

• 配置"strictMode": false
• 配置syncFields字符串数组，数组项是需要同步的变量名

以上面为例，我们在 combo 上配置"strictMode": false和"syncFields": ["super_text"]，即可实现同步

设置序号

默认 Combo 数据域中，每一项会有一个隐藏变量index，可以利用 Tpl 组件，显示当前项序号

自定义删除按钮

默认删除单项按钮为"x"，可以通过配置 deleteBtn 属性自定义删除单项按钮，目前 deleteBtn 支持的属性有 string和Button类型

如下，当 deleteBtn 为string时，对应的值会被渲染成文本

如果想要赋予删除按钮更多能力，则需要将 deleteBtn 配置成Button类型，还可以利用index参数动态控制按钮的显隐或禁用状态等。

自定义新增按钮

可以通过配置 addBtn 属性自定义新增按钮，在非 Tabs 模式下生效。目前 addBtn 支持属性 Button类型

如果仅想更改新增按钮文本请使用 addButtonText, 仅想增添样式请使用 addButtonClassName

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细请查看事件动作。

[name]表示当前组件绑定的名称，即name属性，如果没有配置name属性，则通过value取值。

add

delete

tabsChange

监听 tab 切换，获取被激活的索引。

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

clear

reset

如果配置了resetValue，则重置时使用resetValue的值，否则使用初始值。

setValue

复制数值

1.10.1 及以上版本

此示例主要用来演示如何通过已有数据快速填充 combo 某条数据。点击 copy 按钮会弹出一个 crud 列表，点击对应行上的复制按钮，将选中数据填充到外层的 combo.

注意事项：

1. 需要给 combo 设置个 id 属性，用来给事件动作指定目标用。
2. 弹窗按钮配置了数据映射 {comboIndex: "${index}"} 因为 crud 的行数据上也有 index 变量，派送动作时获取 index 变量是 crud 所在行的序号。所以弹出弹窗的时候，先把 combo 的序号赋值给 comboIndex
3. crud 操作栏里面添加了个按钮，close: true 设置是让动作完成后关闭弹窗。
4. 按钮里面添加了 onEvent 配置，click 时做 setValue 动作，并设置参数 index 为 '${comboIndex}' 值为 ${&}。其中 ${&} 是特殊语法，用来取整个上下数据。

更新所有记录

更新指定行记录

行记录内表单项联动

在 combo 中行记录内表单项联动需要指定componentName为需要联动的表单项名称，以下示例中，当选择指定行内第一个下拉框的值时，将对应的修改所在行内第二个下拉框的值。

通过状态控制动作来联动时比较特殊，需要配置动态的componentId或componentName，一般使用index索引来区分指定的表单项。例如下面的示例中，每行的第一个下拉框的选择来决定所在行记录中的第二个下拉框是否显示。

嵌套结构中行记录内表单项联动

这里所说的是列表结构数据的嵌套。下面的示例中，combo 内包含一个表格编辑框，即 combo 数据是一个列表结构，它的记录中嵌套了另一个列表结构（input-table）。想要实现 input-table 内行记录【修改】操作只更新所在行记录中的表单项。通过componentName来指定所需更新的字段名，它将帮你定位到当前操作行。