Open
Description
需求描述
当系统-os选择不一样时,品牌-brand展现出不同的选项。
现在的方案方案: 配置多个品牌,通过showOn来联动展示不同的品牌。
{
type: 'Radio',
model: 'os',
label: '系统',
options:[
{label: 'IOS', 'value': 'IOS'},
{label: 'Android', 'value': 'Android'},
]
},
{
type: 'Radio',
model: 'brand',
label: '品牌',
options: [
{label: '苹果', 'value': 'apple'},
],
showOn: {
os: [
{
type: 'enum',
enum: ['IOS']
}
]
}
},
{
type: 'Radio',
model: 'brand',
label: '品牌',
options: [
{label: '三星', 'value': 'samsung'},
{label: '华为', 'value': 'huawei'},
],
showOn: {
os: [
{
type: 'enum',
enum: ['Android']
}
]
}
},
现有方案的问题
1、当条件变多时,比如os增加到5个甚至10个,此时需要配置的品牌将会非常多;
2、只能使用远程拉取来进行复杂的选项联动;
讨论方案: 支持配置项设置为函数,paramsContainer
中包含当前表单的model的值和外部传入的参数的集合。
方案一:支持单个配置项配置为函数
[
{
type: 'Radio',
model: 'os',
label: '系统',
options:[
{label: 'IOS', 'value': 'IOS'},
{label: 'Android', 'value': 'Android'},
]
},
{
type: 'Radio',
model: 'brand',
label: '品牌',
options(paramsContainer) {
const {os} = paramsContainer;
const map = {
'IOS': [
{label: '苹果', 'value': 'apple'},
],
'Android': [
{label: '三星', 'value': 'samsung'},
{label: '华为', 'value': 'huawei'},
]
};
return map[os];
}
}
]
方案二:支持一个computedFields属性,返回一个新的配置项,可以覆盖其它配置
[
{
type: 'Radio',
model: 'os',
label: '系统',
options:[
{label: 'IOS', 'value': 'IOS'},
{label: 'Android', 'value': 'Android'},
]
},
function field(paramsContainer) {
const {os} = paramsContainer;
const map = {
'IOS': [
{label: '苹果', 'value': 'apple'},
],
'Android': [
{label: '三星', 'value': 'samsung'},
{label: '华为', 'value': 'huawei'},
]
};
return {
model: 'brand',
type: 'Radio',
label: (os || 'IOS') + '-品牌',
options: map[os || 'IOS']
};
}
]