# 表单关联插件
@sula/plugin-form-dependency提供了表单级联控制的能力，支持值、可见性、数据源、是否禁用四种类型级联控制
示例：
dependency: {
visible: { // 当type字段输入'fruit'或者'vegetables'时，可见 其余不可见
relates: ['type'],
inputs: [['fruit', 'vegetables']],
output: true,
defaultOutput: false,
},
source: { // type字段输入不同字段对应不同数据源
relates: ['type'],
cases: [
{ inputs: [['fruit']], output: fruitSource },
{ inputs: [['vegetables']], output: vegetablesSource },
],
defaultOutput: [],
},
value: { // type变化时 清空值
relates: ['type'],
defaultOutput: '',
}
}
# API
dependency支持以下四种属性配置：
- value
- visible
- source
- disabled
每个属性可配置以下api：
# relates
- 类型：
Array<NamePath> - 默认值:
-
影响表单组件数据源的数组
# inputs
- 类型：
any[][] - 默认值:
-
relates数组对应的表单值，每个数组中的值与realtes对应
示例：
{
dependency: {
visible: {
relates: [['input1'], ['input2']],
inputs: [['a1'], ['b1', 'b2']], // input1输入a1, input2输入b1或b2时 可见
output: true
defaultOutput: false,
}
}
}
# output
- 类型：
any - 默认值:
-
匹配到inputs时，输出值
# ignores
- 类型：
any[][] - 默认值:
-
数组中的每一个数组分别对应relates中需要忽略的值，当匹配忽略时则采用defaultOutput
# defaultOutput
- 类型:
any - 默认值:
-
匹配ignores或未匹配到inputs时，输出值
# type
自定义关联，自定义插件查看插件规范
示例：
dependency: {
value: {
relates: ['input'],
type: (ctx, config) => {
const { form } = ctx;
if (form.getFieldValue('input') === '95') { // 当input输入95时，output设置为9527
form.setFieldValue('output', '9527')
}
}
}
}
类方式插件定义：
class DependencyPlugin {
key = "custom-dependency";
apply(api) {
api.dependencyType("custom::dependency", (ctx, config) => {
const { form } = ctx;
if (form.getFieldValue('input') === '95') {
form.setFieldValue('output', '9527')
}
});
}
}
// 插件引入
<Form
plugins={[new DependencyPlugin()]}
/>
函数方式插件定义：
function dependencyPlugin(api) {
api.dependencyType("custom::dependency", (ctx, config) => {
const { form } = ctx;
if (form.getFieldValue('input') === '95') {
form.setFieldValue('output', '9527')
}
});
}
// 插件引入
<Form
plugins={[dependencyPlugin]}
/>
# cases
- 类型：
Array - 默认值:
-
更多的匹配场景，cases中同名字段优先级更高
示例：
dependency: {
visible: {
relates: [['input1'], ['input2']],
cases: [
{
inputs: [['a1'], ['a2']], // input1输入a1 input2输入a2时输出true
output: true
},
{
inputs: [['b1'], ['a2', 'b2']], // input1输入b1 input2输入a2或b2时输出true
output: true,
},
],
defaultOutput: false,
}
}