表单的联动指的是，某个表单项的输入或状态的改变，会影响到其他表单项的的状态。 不妨以一个录入“函数参数”的表单为例：
“参数类型”这一下拉表单项的取值可以有三种，分别是“数字”、“文本”、“布尔” 而“参数类型”的选择，决定了后续几个表单项如何展示：
- 若“参数类型”表单项中选择“数字”，则后续部分应展示“最大值”、“最小值”等配置项。
- 若“参数类型”表单项中选择“文本”，则后续部分应展示“最大长度”配置项。
- 若“参数类型”表单项中选择“布尔”，则后续部分应展示“真值标签”、“假值标签”等配置项。
可以看到，示例表单中“参数类型”这一表单项的选择直接影响到了后续的表单项的展示状态，这就是一种“联动”表现。在表单编辑器中，这种效果可以借助联动函数来实现。
在表单编辑器中选中某一表单项后，即可在【配置菜单】的【联动】选项卡中编写联动函数以实现联动逻辑。 以上述案例中的“最小值”表单项为例，它只在“参数类型”的选择为“数字”时展示。该联动逻辑可用如下的联动函数表示：
// type 为“参数类型”表单项的 key 值
// val 为“参数类型”表单项的当前取值
watch('type', val => {
const isActivated = val === 'number';
set('activated', isActivated);
});可以看到，在联动函数的编写中，使用到了 watch、set 等方法。
watch 方法共含有两个入参:
- 第一个参数是需要监听的表单项的
key值 - 第二个参数是监听被触发时的回调函数
监听 key 值在通常情况下就等于所监听的表单项的 key 值。
在某些嵌套的情况下，可能需要监听“父级”表单中的表单项输入的变化。
例如，若在之前的“函数参数”案例中，除“参数类型”之外的表单项，均被置于一个子表单中。
此时，子表单中表单项的联动函数若想监听子表单之外的“参数类型”表单项，其的监听函数应写为：
watch('../type', val => {
// effect logic...
});其中的 ../type 就表示监听嵌套结构中“上一级”表单中 key 为 type 的表单项。
若涉及多级嵌套，则可以写为诸如 ../../type 的形式。
set 方法用于改变当前表单项的状态，包括
-
是否激活
set('active', true/false)
-
是否显示
set('visible', true/false)
-
是否只读
set('readonly', true/false)
-
是否禁用
set('disabled', true/false)
四个状态。
这里的 this 指向表单渲染组件，可以通过 this.data 访问到当前的表单数据。
若需要在联动函数中修改表单的值，可以借助 vue 的 $set 方法进行操作。
例如：
watch('type', val => {
const isNumber = val === 'number';
// “参数类型”的取值为“数字”时
// 直接设置最小值为 0
this.$set(this.data, 'min', 0);
...
});若在 Vue3 环境下，则可直接进行赋值。