数据录入与表单有已知边界

NnForm 表单

原生提交行为与表单布局上下文。

示例

API

Props

名称	类型	默认值	说明
model	object	{}	提交和公开方法返回的模型对象。组件不会克隆或修改它。
layout	string	'horizontal'	horizontal、vertical 或 inline；其他值回退 horizontal。
labelCol	FormColumn	{}	提供给子级 NnFormItem 的标签列配置。
wrapperCol	FormColumn	{}	提供给子级 NnFormItem 的控件列配置。
colon	boolean	true	非纵向布局中是否在标签后显示冒号。
disabled	boolean	false	为表单根节点增加禁用样式类，并写入表单上下文。

FormColumn 当前读取以下字段：

interface FormColumn {
    span?: number | string; // 0..24
    offset?: number | string; // 0..24
    class?: unknown;
    className?: unknown;
    style?: Record<string, string | number>;
}

横向和行内布局会把 style 展开合并，因此可靠用法是传普通样式对象。纵向布局会直接把 style 交给 Vue，运行时也能接受字符串或数组，但不建议依赖这种布局差异。

Events

事件	参数	说明
submit	(event: SubmitEvent)	原生表单提交时触发；组件会先 preventDefault()。
finish	(model: object)	紧接 submit 触发，参数就是传入的 model 引用。

Slots

名称	作用域参数	说明
default	—	表单内容。

Expose

名称	签名	说明
submit	() => void	调用原生表单的 requestSubmit()。
validate	() => Promise<object>	解析为当前 model。
validateFields	() => Promise<object>	validate 的别名。
resetFields	() => void	调用原生表单的 reset()。

当前限制

• 当前没有 rules、字段注册或异步校验系统；validate/validateFields 不执行规则，只会成功解析当前模型。
• resetFields 只重置原生表单控件，不会自动回写外部 Vue 响应式 model。
• disabled 上下文当前没有被 Input、Select 等控件消费；需要在控件上显式设置 disabled。