三、字段体系
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
