开源Vue表单设计器FcDesigner中组件联动的配置教程_fcdesigner表单联动数据

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

源码地址: Github | Gitee | 文档 | 在线演示

数据结构

type Control = Array<{ //通过内置条件控制,和`handle`二选一 value?: any; //内置的条件,可以和`value`组合使用 condition?: \'==\' | \'!=\' | \'\' | \'>\' | \'>=\' | \'<\' | \'<=\' | \'in\' | \'notIn\' | \'on\' | \'notOn\' | \'between\' | \'notBetween\' | \'empty\' | \'notEmpty\'; //自定义控制条件 handle?: (val: any, api: Api) => boolean; //控制对应规则的显示,禁用,必填. 默认值为 if method?: \'if\' | \'enabled\' | \'required\'; //控制的字段,(对应组件的字段ID或者编号) rule: string[];}>

注意：组件值必须与 value 严格全等（包括数据类型完全一致）。

method 选项

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

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}$\' (不需要前后的\"/\")

联动示例

实现表单中手机号(Ffb7m8y7e77zalc)与验证码(Ffa7m8y7eu9eaoc)字段的联动显示：当手机号输入不为空时，才展示验证码输入框。

在联动数据中配置联动规则

注意：必须严格按指定数据类型配置，否则会触发内容语法错误提示。

更多示例

控制当前表单中对应的自己是否显示

[{ value: \'1\', rule: [\'field1\', \'field2\']}]

控制当前表单中对应的自己是否禁用

[{ value: \'1\', method: \'disabled\', rule: [\'field1\', \'name2\']}]

控制当前表单中对应的自己是否必填

[{ value: \'1\', method: \'required\', rule: [\'field1\']}]

自定义条件

[{ \"handle\": function(val, api) { return val === \'ok\' || val === \'no\'; }, \"method\": \"if\", \"rule\": [\"Ffa7m8y7eu9eaoc\"]}]