组件联动

在表单开发中，经常需要实现组件之间的联动行为，例如当某个输入框的值满足特定条件时，动态显示或隐藏其他组件。FormCreate 提供了强大的组件联动功能，通过 control 配置项实现组件的加载、显示、禁用和必填等状态控制。

本文将详细介绍组件联动的配置项及其用法，并通过多个示例帮助您在实际业务场景中灵活应用这些功能。

数据结构

type Control =  Array<{
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定义控制条件
  handle?: (val: any, api: Api) => boolean;
  //控制指定规则的显示,禁用,必填
  method?: 'display' | 'disabled' | 'hidden' | 'required';
  //控制的字段
  rule: string[];
} | {
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定义控制条件
  handle?: (val: any, api: Api) => boolean;
  //控制的规则
  rule: Rule[];
  //条件达成时,将`rule`添加到指定字段后面
  append?: string;
  //条件达成时,将`rule`添加到指定字段前面
  prepend?: string;
  //条件达成时,将`rule`添加到指定字段的子级, 不配置`append`和`prepend`时, 默认当前规则
  child?: boolean;
}>

注意

handle 优先级大于 value

推荐采用第一种组件联动形式：提前在规则中定义好所有关联组件。

method 选项

键名	配置项	说明
if/hidden	条件渲染	控制组件的显示/隐藏状态
required	必填验证	设置字段是否为必填项
disabled/enabled	禁用状态	控制组件是否可交互
display	显示状态	控制组件的显示状态(会渲染 DOM)

注意

当前版本存在语义反转问题：hidden=true 时显示组件，disabled=true 时启用功能。为此新增了语义明确的 if（true显示/false隐藏）和 enabled（true启用/false禁用）参数。

condition 选项

键名	运算符	说明	值类型	示例
==	全等	组件值完全等于value	Any	value: 10
!=	不全等	组件值不等于value	Any	value: "error"
<>	不全等	组件值不等于value（同!=）	Any	value: false
>	大于	组件值大于value	Number	value: 100
>=	大于等于	组件值大于等于value	Number	value: 18
<	小于	组件值小于value	Number	value: 0
<=	小于等于	组件值小于等于value	Number	value: 100
in	包含	组件值存在于value数组中	Array	value: [1,2,3]
notIn	不包含	组件值不存在于value数组中	Array	value: ["a","b"]
on	包含值	value存在于组件值（数组）中	String	Number
notOn	不包含值	value不存在于组件值（数组）中	String	Number
between	区间内	组件值在value[0]和value[1]之间	Array[2]	value: [10,20]
notBetween	区间外	组件值不在value[0]和value[1]之间	Array[2]	value: [0,100]
empty	为空	组件值为空时通过验证	-	value: true
notEmpty	非空	组件值不为空时通过验证	-	value: true
pattern	正则	用正则表达式验证组件值	String	value:'^1\d{10}$' (不需要前后的"/")

联动示例

追加新规则

通过评分组件的控制规则实现条件加载：当用户评分低于3星时，自动显示差评原因输入框，要求用户填写具体原因。

追加新规则到指定位置

通过输入框的控制规则实现动态表单：当input3有输入值时，自动在input1之后插入input4输入框，实现根据用户输入动态扩展表单字段的功能。

追加新规则到插槽中

通过输入框的控制规则实现动态插槽：当输入值为"child"时，自动在输入框的append插槽位置添加一个按钮，实现根据输入内容动态显示插槽内容的功能。

控制已有规则必填状态

通过输入框的控制规则实现动态必填验证：当input1输入值为"required"时，自动将input2字段设置为必填状态，实现根据条件动态调整表单验证规则的功能。

配置多个组件联动

一个输入框同时配置多个控制规则：当输入框有值时，既在输入框后缀插槽添加按钮，又动态插入评分组件，实现多条件同时触发的复杂表单交互效果。

控制已有规则显示状态

控制当前表单中的field/name组件显示状态

const control = {
    value: 1,
    rule: ['field1', 'name2']
}

条件控制已有规则显示状态

通过条件 >= 1 控制当前表单中的field/name组件显示状态

const control = {
    value: 1,
    condition: '>=',
    rule: ['field1', 'name2']
}

控制已有规则禁用状态

控制当前表单中的field/name组件是否禁用

const control = {
    value: 1,
    method: 'disabled',
    rule: ['field1', 'name2']
}

通过条件加载新规则

当组件 value 不等于组件值时加载 rule 中的新规则到表单尾部

const control = {
    value: 1,
    condition: '!=',
    rule:[{type:'input', field:'field',title:'field'}]
}

修改其他组件插槽

条件成立后将新规则插入到goods_name组件的children中

const control = {
    value:1,
    prepend:'goods_name',
    child: true,
    rule:[{type:'input', field:'field',title:'field'}]
}

通过 control 配置项，您可以轻松实现表单中各个组件之间的复杂联动逻辑，极大提升表单的动态性与用户体验。无论是简单的显示隐藏，还是复杂的条件加载，都可以通过上述方式进行配置。