Skip to content

表单联动

要评价一个表单工具能力强不强,表单联动能力至关重要。

《vue-form-craft》提供了一套【简单且灵活】的表单联动实现方式!

分为【JS表达式】和【数据联动】两种实现方式

JS表达式

当JsonSchema某个协议字段需要联动时,使用《JS表达式》就够了。

JS表达式为字符串格式,以双花括号 "{{ ... }}" 为语法特征。

在JsonSchema中,被双花括号包裹的字符串一律会被动态解析js表达式并返回结果,且可以使用一些联动变量(上下文)。

JS表达式 可以使用的联动变量:

变量名类型描述
$valuesObject整个表单的值
$selectDataObject【选择类字段】选中项数据集
$itemObject【自增组件】专用,单行的数据集
$indexObject【自增组件】专用,单行的下标
...anyschemaContext传入的自定义变量

这些变量一旦发生更新时,JsonSchema就会基于这些变量重新计算。

这种联动方式能应对大部分联动场景,例如:控制字段禁用、隐藏、文案提示等交互。

JsonSchema 所有协议字段都支持JS表达式。 这意味着你可以动态的控制表单的任何细粒度的配置,实现各种复杂的联动效果!

数据联动

当需要监听某个表单项数据变化并触发联动时,可以配置 linkages

linkages 是一个数组,可以同时联动多个字段。

常用字段:

  • target:目标字段(必传)
  • type:联动类型,'data'(改值)或 'attr'(改属性)
  • condition:触发条件(不传默认持续触发)
  • value:写入值(不传时常用于清空)
  • path/customPath:属性联动时的目标路径

更多示例

1、评分低于3星可以输入差评原因


2、选完商品,将其价格传给下一个字段


3、串行联动:性别为女时,需要填写是否怀孕,已怀孕可以继续填写怀孕周期。(切换为男性时,清除填写过的怀孕信息)


4、自增组件联动:批量设置密码会联动所有密码框。用户名 清空时,会自动清空对应的密码。