三、字段体系

3.1 基础字段
基础字段是表单中最常用的输入控件，每个字段都有丰富的配置选项。

基础字段类型：


字段公共属性：所有字段都包含以下公共配置：

{
  customClass: '',      // 自定义样式类名
  isLabelWidth: false,  // 是否指定标签宽度
  labelWidth: 100,      // 标签宽度
  hidden: false,        // 是否隐藏
  disabled: false,      // 是否禁用
  dataBind: true,       // 是否数据绑定
  required: false,      // 是否必填
  width: 100            // 字段宽度
}

3.2 高级字段
高级字段提供了更丰富的输入方式，满足复杂业务场景：

数据源配置：对于 radio、checkbox、select 等需要选项数据的字段，支持三种数据源类型：

静态选项：在设计时手动添加固定的选项列表

数据源（datasource）：通过全局配置的数据源获取数据

远程函数（remoteFunc）：通过自定义函数异步获取数据

数据源配置示例：

// 全局配置数据源
globalConfig: {
  dataSource: [
    {
      key: 'getCategories',     // 数据源唯一标识
      name: '获取分类列表',      // 数据源名称
      url: '/api/categories',   // 请求地址
      method: 'GET',
      auto: true,               // 是否自动请求
      responseFunc: 'return res.data'  // 数据处理函数
    }
  ]
}

3.3 布局字段
布局字段用于组织表单的结构，FormMaking 提供了丰富的布局容器：

表格布局在 1.2.20 版本中进行了重要升级，增加了对表格单元格的插入、合并、拆分、删除功能，让表单设计能够满足更加复杂的企业级表格场景。

四、表单属性与全局配置

4.1 表单全局属性
通过 global-config 可以对整个表单进行全局配置：

4.2 中英文国际化配置
FormMaking 内置国际化支持，默认使用中文。如需使用英文，配置如下：

Vue.use(FormMaking, { lang: 'en-US' })

在同时使用 Element UI 和 vue-i18n 的多语言项目中，完整配置如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
import VueI18n from 'vue-i18n'
import FormMaking from 'form-making'

// 引入语言包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

const messages = {
  'en-US': {
    message: 'hello',
    ...enLocale
  },
  'zh-CN': {
    message: '你好',
    ...zhLocale
  }
}

const i18n = new VueI18n({
  locale: 'zh-CN',
  messages
})

// Element UI 国际化配置
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

// FormMaking 国际化配置
Vue.use(FormMaking, { lang: 'zh-CN', i18n })

4.3 字段默认配置
通过 field-config 可以为特定字段类型设置默认属性：

fieldConfig: [
  {
    type: 'fileupload',
    options: {
      domain: 'https://cdn.example.com/',
      action: '/api/upload'
    }
  },
  {
    type: 'select',
    options: {
      options: [
        { value: 'option1', label: '选项一' },
        { value: 'option2', label: '选项二' }
      ]
    }
  }
]

4.4 字段标识绑定
在设计复杂表单时，字段的 fieldId 可能已经被业务系统预先定义。FormMaking 支持通过 field-models 为字段标识提供下拉绑定：

fieldModels: [
  { fieldId: 'userId', fieldLabel: '用户ID' },
  { fieldId: 'userName', fieldLabel: '用户名' },
  { fieldId: 'userEmail', fieldLabel: '用户邮箱' }
]

配置后，在设计器中选择字段时，可以通过下拉菜单直接绑定预定义的字段标识，避免手动输入。
来源：
https://rvtst.cn