Common Components
On this page

表单组件 ​

NForm ​

NForm 组件示例

TIP

NForm 组件是对 ant-design-vue Form 组件的二次封装, 除了支持 ant-design-vue Form 组件的所有参数/事件/方法/插槽外, 还支持以下参数.

NForm 组件会根据 fields 属性自动生成对应的表单项, 并跟 data 属性进行双向绑定.

Props ​

参数说明类型可选值默认值必填
...ant-design-vue Form 组件的所有参数............
fields表单项的集合, 用于描述表单的结构.Array<FormModelFieldArgs>-[]否
fieldLayout表单项的布局选项. 示例NFormFieldLayout-{ span: 24 }否
fieldStatus表单项的状态选项. 示例NFormFieldStatus-{ disabled: false, readOnly: false }否
data表单数据对象, 可以用 v-model:data 双向绑定.{}--否

Methods ​

除以下方法外, 还继承了 ant-design-vue Form 组件的所有方法.

getFormData ​

获取表单数据代理对象, 可用于在外部修改表单数据.

Slots ​

插槽名称说明类型
${name}自定义名称为 name 的整个表单项v-slot:[name]="{ field, formData, status }"
${name}Label自定义名称为 name 的表单项的标签v-slot:[name + "Label"]="{ field, formData, status }"
${name}Control自定义名称为 name 的表单项的控件v-slot:[name + "Control"]="{ field, formData, status }"

slot 示例

setField ​

设置表单项的值, 用于编程式设置表单项的值.

  • 参数: (name: string, value: any) => void
  • 示例: nFormRef.value.setField("input", "不是输入框不是输入框不是输入框")

NEasyForm ​

NEasyForm 组件示例

NEasyForm 基于 NForm 组件封装, 继承了 NForm 组件的所有参数/事件/方法/插槽, 并增加了展开动作以及重置/搜索按钮.

INFO

不同于 NForm 组件, NEasyForm 组件的 data 参数在表单字段的值变化时不会立即更新而是在 搜索按钮点击后触发.

Props ​

继承 NForm 组件的所有参数, 除此之外还有以下参数.

data ​

表单数据对象, 可以用 v-model:data 双向绑定.

TIP

与 NEasyForm 组件的 data 参数仅在初始化, 搜索/重置按钮点击后触发.

如果需要在表单字段的值变化时立即获取到最新的值, 可以使用 change 事件.

  • 类型: {}

beforeSearch spec configurable ​

search 事件触发前的钩子, 返回 false 或 Promise.reject 时将阻止 search 事件的触发.

defaultExpandRowCount spec configurable ​

未展开时显示的行数, 默认值为 2. 可以通过对象的方式设置不同屏幕尺寸

Methods ​

除以下方法外, 还继承了 ant-design-vue Form 组件和 NForm 组件的所有方法.

触发搜索按钮点击事件, 效果等同于点击搜索按钮. 用于编程式触发搜索按钮点击事件.

reset ​

触发重置按钮点击事件, 效果等同于点击重置按钮. 用于编程式触发重置按钮点击事件.

syncFormData ​

默认情况下, NEasyForm 组件的 data 参数在表单字段的值变化时不会立即更新而是在 搜索/重置 后更新.

调用该方法可以立即更新 data 参数.

Events ​

事件名称说明回调参数
...ant-design-vue Form 组件的所有事件...
search搜索按钮点击事件() => void
reset重置按钮点击事件() => void
change表单数据变化事件, 入参中的 data 参数是只读的. 可以通过该事件获取到最新的表单数据.(data: {}) => void
类型说明 ​
FormModelFieldArgs ​

详情见 FormModelFieldArgs