组件值改变的回调

update 回调和 link 字段允许您在表单组件的值发生变化时，动态修改其他组件的属性或值。这个功能在创建复杂、动态的表单时非常有用，例如：根据用户输入动态调整表单的显示状态、必填规则、禁用状态等。

推荐使用功能更强大的计算规则功能，具体用法请详细阅读计算组件规则文档。

数据结构

type UpdateArg = {
    //触发方式：可能是由初始化、值变化或字段联动引起的触发
    origin: 'change' | 'init' | 'link'
    //关联触发的字段名，当 origin 为 'link' 时有效
    linkField: string | undefined;
}
type Update = (val:any, rule:FormRule, api:Api, arg: UpdateArg)=>boolean|undefined;

origin 选项

• init: 初始化时触发，通常在组件第一次加载时触发。
• link: 当其他字段联动影响当前字段时触发。
• change: 当字段的 value 发生变化时触发。

注意

组件的 update 回调会在初始化完成后立即自动执行一次。

示例

更新当前组件

使用update回调函数动态更新组件属性：当输入框的值发生变化时，自动将组件的标题同步更新为当前输入值，实现表单组件属性的实时联动效果。

更新其他组件

通过update回调和api方法实现双向联动：当input1或input2的值发生变化时，互相更新对方的标题属性，实现两个表单字段之间的实时动态交互。

关联字段变化时触发

通过link属性建立字段关联：当input1的值发生变化时，自动触发input2的update回调函数，动态更新input2的标题为当前时间戳，实现跨字段的联动更新机制。

更新显示状态

通过update回调控制组件显示状态：当输入框的值为空时，自动隐藏该组件，实现根据输入内容动态控制组件可见性的功能。

控制组件显示状态

假设我们希望根据输入框的内容动态显示或隐藏另一个组件。当 input1 的值为空时，隐藏 input2。

const rules = [{
  type: 'input',
  field: 'input1',
  title: '输入框1',
  value: '',
  update(val, rule, api) {
    const targetRule = api.getRule('input2');
    targetRule.hidden = !val;
  }
},
{
  type: 'input',
  field: 'input2',
  title: '输入框2',
  hidden: true
}]

修改指定组件属性

我们可以根据评分组件的值，动态调整评论输入框的最大字符长度。比如当评分超过3星时，评论输入框的最大字符长度从200增加到500。

const rules = [{
    type: 'rate',
    field: 'rating',
    title: '评分',
    value: 0,
    update(val, rule, api) {
        const commentRule = api.getRule('comment');
        commentRule.props.maxlength = val > 3 ? 500 : 200;
    }
},
{
    type: 'input',
    field: 'comment',
    title: '评论',
    props: {
        maxlength: 200
    }
}]

组合计算字段值

通过 link 配置项，我们可以让一个字段的变化触发其他字段的 update 回调。例如在一个购物车表单中，我们可能需要根据商品的数量和单价来动态计算总价。

const rules = [{
    type: 'inputNumber',
    field: 'quantity',
    title: '数量',
    value: 1,
    link: ['price'],
    update(val, rule, api) {
        const price = api.getValue('price');
        const total = val * price;
        api.setValue('total', total);
    }
},
{
    type: 'inputNumber',
    field: 'price',
    title: '单价',
    value: 100,
},
{
    type: 'input',
    field: 'total',
    title: '总价',
    props: {
        disabled: true
    }
}]

更新多选框选项

在某些场景中，你可能需要根据用户选择动态更新多选框或单选框的选项列表。

const rules = [{
    type: 'select',
    field: 'category',
    title: '分类',
    value: '',
    options: [
        { value: 'fruits', label: '水果' },
        { value: 'vegetables', label: '蔬菜' }
    ],
    link: ['product'],
    update(val, rule, api) {
        const productRule = api.getRule('product');
        if (val === 'fruits') {
            productRule.options = [
                { value: 'apple', label: '苹果' },
                { value: 'banana', label: '香蕉' }
            ];
        } else if (val === 'vegetables') {
            productRule.options = [
                { value: 'carrot', label: '胡萝卜' },
                { value: 'spinach', label: '菠菜' }
            ];
        }
    }
},
{
    type: 'select',
    field: 'product',
    title: '产品',
    options: []
}]

通过 update 回调，您可以实现表单中组件间的复杂交互逻辑。无论是简单的动态显示与隐藏，还是复杂的值联动与计算，update 回调都能提供强大的支持。结合 link 配置项，您可以更方便地实现组件之间的联动，使表单更加智能和动态。通过以上的示例和解释，相信您能更好地理解和应用 update 回调功能。