# Link 表单元素关联操作

开发者可通过 link 属性配置表单关联操作。元素关联用于实现同一表单中不同元素的联动操作，目前支持下列四种关联操作：

禁用目标元素
隐藏目标元素
过滤目标元素候选项
使目标元素发起远程候选项查询

# 配置方法

const fields = [
  {
    // …,
    link: {
      field: 'custType2',
      trigger: 'change',
      filter: (option, value) => {
        return value === option.parentId
      }
    }
  }
]

1
2
3
4
5
6
7
8
9
10
11
12

同时配置多个关联操作

开发者可以为表单字段配置的 link 属性传入一个数组，来为该字段配置多个关联操作。

const fields = [
  {
    // …,
    // 配置多个关联操作
    link: [
      {
        field: 'custType2',
        trigger: 'change',
        filter: (option, value) => {
          return value === option.parentId
        }
      }, {
        field: 'time',
        trigger: 'change',
        visible: value => value === 1
      }, {
        // 同时关联多个字段
        field: ['installDate', 'manufactureDate'],
        trigger: 'change',
        visible: value => value === 2
      }
    ]
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 属性说明

属性名	属性值说明	默认值
field	[String\|Array] 目标字段或包含多个目标字段的数组	无
trigger	[Boolean] 触发关联动作的事件名 input/change/blur	blur
fetch^*	[Boolean] 目标元素发起候选项查询关联的字段须配置 fetch 属性，参考 fetch 配置目标元素类型为 select/checkbox/radio/cascader 时有效	无
filter^*	[Function] 目标元素发起候选项过滤值为函数，用于筛选候选项。当触发过滤操作时，将遍历目标元素的候选项，并依次执行该函数，如函数返回 `false` 则移除目标函数当前候选项。函数携带 `option` `value` `field` 三个参数： - option，目标元素当前候选项如上例客户细类元素中的 `{label: '商业', value: 0, parentId: 0}` - value，当前元素值，如上例客户大类的当前选定值 - field 前元素配置，如上例中客户大类字段的配置目标元素类型为 select/checkbox/radio/cascader 时有效	无
disable^*	[Function] 禁用目标元素值为函数，用于判断是否禁用目标元素。当触发关联操作时，将执行该函数，如返回值为 `true` 则禁用目标元素。函数携带 `value` `field` 两个参数： - value，当前元素值，如上例客户大类的当前选定值 - field 当前元素配置，如上例中客户大类字段的配置	无
visible^*	[Function] 隐藏目标元素值为函数，用于判断是否隐藏目标元素。当触发关联操作时，将执行该函数，如返回值为 `false` 则隐藏目标元素。函数携带 `value` `field` 两个参数： - value，当前元素值，如上例客户大类的当前选定值 - field 当前元素配置，如上例中客户大类字段的配置	无

TIP

属性表中 fetch filter disable visible 互斥，即在一个关联配置中仅可选其一。

注意

开发者为 filter disable visible 所配置的函数应总是返回一个布尔值。

# 关联操作示例

const formFields = [
  {
    label: '客户大类',
    field: 'custType',
    type: 'select',
    value: '',
    options: [
      {label: '工商户', value: 0},
      {label: '居民户', value: 1}
    ],
    // 关联下方的客户细类、预约时间两个字段
    link: [{
      // 目标字段
      field: 'custType2',
      // 关联触发的事件名
      trigger: 'change',
      // 发起候选项筛选
      filter: (option, value) => {
        // 返回布尔值
        // 若客户大类选中值与客户细类候选项的 parentId 属性值不全等则过滤掉该候选项
        return value === option.parentId
      }
    }, {
      field: 'time',
      trigger: 'change',
      // 若客户大类选中值不等于 1 则该元素隐藏
      visible: value => value === 1
    }]
  }, {
    label: '客户细类',
    field: 'custType2',
    type: 'select',
    value: '',
    rule: 'required',
    options: [
      {label: '商业', value: 0, parentId: 0},
      {label: '工业', value: 1, parentId: 0},
      {label: '公福', value: 2, parentId: 0},
      {label: '自用', value: 3, parentId: 0},
      {label: '居民', value: 4, parentId: 1},
      {label: '低保', value: 5, parentId: 1}
    ]
  }, {
    label: '预约时间',
    field: 'time',
    type: 'timepicker',
    value: ''
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

← 字段校验计算字段 →