组件联动
可以通过control
配置项实现通过组件的值控制其他组件是否加载/显示/禁用/必填
数据结构
ts
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'}] }
注意
handle
优先级大于value
示例
当评价小于3星时输入差评原因
当input3
输入值后插入text4
当输入 child
时追加插槽
当输入 required
时field2
必填
同时多个control
生效