Appearance
CommonForm 通用表单
配置式表单。以下示例按 Vue 2 文档顺序复刻，参数继续使用 model、fields、commands、operateType 与 elementProps。
基础表单
覆盖旧示例的分组、文本、输入、选择、状态、级联、数值、日期与时间字段，并保留分组命令。
运行结果可直接修改字段并执行按钮
表单校验
校验规则仍写在字段的 rules 中，通过组件实例的 validate() 统一校验；需要联动单个字段时使用 validateField(fields)。
底部命令显式配置 commandType: 'save' 后，组件会先校验表单，校验通过才发出命名事件。未配置该类型的命令保持原有行为：
ts
const commands = [{ text: '保存', command: 'save', commandType: 'save' }]运行结果可直接修改字段并执行按钮
查看状态
operateType="view" 时所有可编辑字段自动禁用，同时隐藏底部命令。
运行结果可直接修改字段并执行按钮
状态校验
visibleValidator 和 disableValidator 兼容 Vue 2 的直接 model => boolean 写法。
运行结果可直接修改字段并执行按钮
Attributes
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
loading | boolean | false | 表单加载状态 |
operateType | add | edit | view | add | 表单操作状态 |
rowFieldsCount | number | 2 | 每行字段数 |
model | object | {} | 响应式表单模型 |
fields | FormField[] | [] | 字段配置 |
commands | CommonCommand[] | [] | 底部命令 |
customCommands | CommonCommand[] | [] | 顶部命令 |
customComponents | Record<string, Component> | {} | 自定义控件映射 |
elementProps | object | {} | 透传给 ElForm |
extendProps | object | {} | 内容区和底部样式 |
emitRegister | object | {} | 接收暴露方法 |
Field Options
| 参数 | 说明 |
|---|---|
type | 字段类型 |
label | 标签文本 |
dataField | model 字段名 |
columnSpan | 占用网格列数 |
rules | Element Plus 表单规则 |
visibleValidator | 显示校验，兼容直接接收 model |
disableValidator | 禁用校验，兼容直接接收 model |
elementProps | 透传字段控件属性 |
extendProps | 业务扩展参数 |
Field ExtendProps Options
常用参数包括 options、groupTitle、subTitle、groupCommands、showInFooter、beforeText、appendText、helpText、fromField、toField、onChange、onSelect 和 onEnter。inputNumberRange 必须同时配置 fromField 与 toField。
Field Type Options
支持 input、text、status、autoComplete、inputNumber、textArea、select、multiSelect、groupedSelect、cascader、treeSelect、switch、单选/多选、时间/日期及区间、groupTitle、custom 与上传类型。text 空值沿用旧版显示“暂无”；upload 绑定文件列表，avatarUploader 绑定图片 URL 并由上传回调更新。
自定义字段的网格项和控件默认使用 width: 100%、min-width: 0，可以在弹窗表单中占满当前列。大型可选表格通常更适合直接放在 Dialog 内容区，操作按钮放在 Dialog footer；内容高度和滚动仍由业务弹窗控制。
旧版直接传入的 label-position 应迁移到 elementProps.labelPosition。rowHeight 不再支持，请使用字段 elementProps、extendProps.formItemStyle 或表单 extendProps.contentStyle 调整布局；开发环境会对这些旧属性给出警告。
Methods
validate、validateField、clearValidate、resetFields、scrollToField；这些方法也会写入 emitRegister。