Skip to content

组件联动

可以通过control配置项实现通过组件的值控制其他组件是否加载/显示/禁用/必填

数据结构

ts
type Control =  Array<{
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定义控制条件
  handle?: (val: any, api: Api) => boolean;
  //控制对应规则的显示,禁用,必填
  method?: 'display' | 'disabled' | 'hidden' | 'required';
  //控制的字段
  rule: string[];
} | {
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定义控制条件
  handle?: (val: any, api: Api) => boolean;
  //控制的规则
  rule: Rule[];
  //条件达成时,将`rule`添加到对应字段后面
  append?: string;
  //条件达成时,将`rule`添加到对应字段前面
  prepend?: string;
  //条件达成时,将`rule`添加到对应字段的子级, 不配置`append`和`prepend`时,默认当前规则
  child?: boolean;
}>

method

  • display: 控制显示
  • hidden: 控制渲染
  • required: 控制必填
  • disabled: 控制禁用

condition

  • ==: 全等
  • !=: 不全等
  • <>: 不全等
  • >: 组件值大于value(Number)
  • >=: 组件值大于等于value(Number)
  • >=: 组件值大于等于value(Number)
  • <: 组件值小于value(Number)
  • <=: 组件值小于等于value(Number)
  • in: 组件值存在于value(Array)
  • notIn: 组件值不存在于value(Array)
  • on: value存在于组件值(Array)
  • notOn: value不存在于组件值(Array)
  • between: 组件值在value(Array)的区间中,组件值>value[0] && 组件值<value[1]
  • notBetween: 组件值不在value(Array)的区间中
  • empty: 组件值为空时
  • notEmpty: 组件值不为空时

属性说明

  • value : 当组件的值和value全等时加载rule中的组件

    js
    {
        value:1,
        rule:[{type:'input', field:'field',title:'field'}]
    }
  • handle Function : 当handle方法返回true时加载rule中的组件

    js
    {
        handle:function(val, fApi){
            return val === 1
        },
        rule:[{type:'input', field:'field',title:'field'}]
    }
  • rule string[]|Rule[] : 控制当前表单中对应的field/name是否显示

    js
    {
        value: 1,
        rule: ['field1', 'name2']
    }
  • method string : 控制当前表单中对应的field/name是否禁用

    js
    {
        value: 1,
        method: 'disabled',
        rule: ['field1', 'name2']
    }
  • condition string : 当value!=组件值时加载rule中的组件

    js
    {
        value: 1,
        condition: '!=',
        rule:[{type:'input', field:'field',title:'field'}]
    }
  • append string : 将rule中的规则追加到goods_name后的位置

    js
    {
        value:1,
        append:'goods_name',
        rule:[{type:'input', field:'field',title:'field'}]
    }
  • prepend string : 将rule中的规则插入到goods_name前的位置

    js
    {
        value:1,
        prepend:'goods_name',
        rule:[{type:'input', field:'field',title:'field'}]
    }
  • child boolean : 将rule 插入到goods_name组件的children

    js
    {
        value:1,
        prepend:'goods_name',
        child: true,
        rule:[{type:'input', field:'field',title:'field'}]
    }

注意

  • handle优先级大于value

示例

当评价小于3星时输入差评原因

input3输入值后插入text4

当输入 child 时追加插槽

当输入 requiredfield2必填

同时多个control生效