# Form Mode 表单模式

表单模式可用于在不同操作场景下批量切换表单元素的可编辑性。例如，在数据详述场景下所有表单元素均只读，而在更新联系方式场景下仅联系方式字段元素可编辑。

每个表单模式均须指定要采用的策略，并指明该策略应控制的字段列表。

TIP

合理的设计操作场景，可以简化表单元素编辑性操控逻辑，提高开发效率。

示例

<template>
  <page>
    <panel>
      <common-form
        :fields="formFields"
        :form-mode="formMode"
        form-mode-set="详述"
      >
    </panel>
  </page>
</template>

<script>
export default {
  data () {
    return {
      formFields: [
        // 此处省略
      ],
      // 本例配置了三个表单模式：详述、新增、更新联系方式
      formMode: {
        '详述': {
          // 模式策略：enable，即采用启用策略
          type: 'enable',
          // 启用策略下，位于 fields 列表中的字段将切换为可编辑，其他的切换为只读
          fields: []
        },
        '新增': {
          // 模式策略：disable，即采用禁用策略
          type: 'disable',
          // 禁用策略下，位于 fields 列表中的字段将切换为只读，其他的切换为可编辑
          fields: []
        },
        '更新联系方式': {
          // 该模式采用启用策略
          type: 'enable',
          // address、tel 两个字段切换为可编辑，其他字段切换为只读
          fields: ['address', 'tel']
        }
      }
    }
  }
}
</script>

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

模式名称

上例中 详述 新增 更新联系方式 等键名叫做 模式名称，模式名称的命名应见名知意。

属性说明

属性名	属性值说明	默认值
type	[String] 模式策略可用策略列表：`enable` `disable` - enable 表示当前模式采用 `启用策略`。在该策略下，通过下列 fields 属性列出的字段将切换为可编辑，其他字段切换为只读。 - disable 表示当前模式采用 `禁用模式`。在该策略下，通过下列 fields 属性列出的字段将切换为只读，其他字段切换为可编辑。	无
fields	[Array] 策略涵盖的字段列表该属性可缺省	[]

← 候选项远程加载表单分段 →