DialogForm

弹窗组件和表单组件的结合体

使用

提示

• Dialog

  • confirm-prop 属性和事件都无效。请使用 form 组件的 action 的 submit 相关属性。关闭按钮使用cancelProp来定义
  • footer-before 和 footer-after 槽位无效，请使用 form 组件的 action-before 和 action-after 槽位

• Form

Props

Name	Description	Type	Options	Default
v-model	表单值	object	-	-
v-mode:visibled	显示窗口	boolean	-	false
form-props	请参考 NForm 属性	object	-	-
dialog-props	请参考 NTable 属性	object	-	-
submit-on-validate	校验不通过的时候不触发提交事件	boolean	-	true
close-reset	关闭弹窗重置表单	boolean	-	true

提示

支持Form 属性 和 Dialog 属性

Events

Name	Description	Parameters
submit	submit 被点击后触发，使用done()函数来关闭loading状态	done, isValid, invalidFields
reset	reset 按钮被点击后触发	-
validate	任一表单项被校验后触发	被校验的表单项 prop 值, isValid, invalidFields
cancel	点击关闭按钮事件	-
close	Dialog 关闭的回调	-
closed	Dialog 关闭动画结束时的回调	-
open	Dialog 打开的回调	-
opened	Dialog 打开动画结束时的回调	-

Methods

Name	Description	Parameters
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array

Slots

name	Description
-	按钮节点之前的内容
form-before	字段开始之前的内容
form-after	按钮节点之后的内容
action-before	在关闭按钮之前的内容
action-after	在关闭按钮之后的内容
[prop]	当前这项的 Form Item 的内容，参数为{ item, value, setValue }
[prop]-label	当前这项的标签文本的内容，参数为 { item }
[prop]-error	当前这项的自定义表单校验信息的显示方式，参数为 { error, item }
title	自定义弹窗标题

提示

• [prop] 为 fields 中定义的 prop

• Dialog 组件插槽除了title以外其它无效