组件联动 ​

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

数据结构 ​

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

type Control =  {
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween';
  //自定义控制条件
  handle?: (val: any, api: Api) => boolean;
  //控制对应规则的显示,禁用,必填
  method?: 'display' | 'disabled' | 'hidden' | 'required';
  //控制的字段
  rule: string[];
} | {
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween';
  //自定义控制条件
  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)的区间中

属性说明 ​

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

  js

  {
      value:1,
      rule:[{type:'input', field:'field',title:'field'}]
  }

  {
      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'}]
  }

  {
      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']
  }

  {
      value: 1,
      rule: ['field1', 'name2']
  }

• method string : 控制当前表单中对应的field/name是否禁用

  js

  {
      value: 1,
      method: 'disabled',
      rule: ['field1', 'name2']
  }

  {
      value: 1,
      method: 'disabled',
      rule: ['field1', 'name2']
  }

• condition string : 当value!=组件值时加载rule中的组件

  js

  {
      value: 1,
      condition: '!=',
      rule:[{type:'input', field:'field',title:'field'}]
  }

  {
      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'}]
  }

  {
      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'}]
  }

  {
      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'}]
  }

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

示例 ​

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

当input3输入值后插入text4

当输入 child 时追加插槽

当输入 required 时field2必填

同时多个control生效