使用 update 回调动态更新组件

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

数据结构

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

origin 选项

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

在线示例

修改value为组件的title

当 input1发生变化时修改input2的title

当 input1发生变化时触发input2的回调

link 配置示例

当input值为空时隐藏组件

业务场景示例

动态显示或隐藏组件

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

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

在这个例子中，当 input1 的值为空时，input2 组件将被隐藏。

动态修改组件属性

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

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

在这个例子中，rating 的值决定了 comment 输入框的最大字符长度。

动态组合计算字段值

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

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

在这个例子中，quantity 和 price 的变化都会触发 total 字段的更新，从而显示正确的总价。

动态更新多选框选项

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

const rules = [{
    type: 'select',
    field: 'category',
    title: '分类',
    value: '',
    options: [
        { value: 'fruits', label: '水果' },
        { value: 'vegetables', label: '蔬菜' }
    ],
    link: ['product'],
    update(val, rule, fApi) {
        const productRule = fApi.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 回调功能。