DrawerForm 表单

DrawerForm 组件是 ElDrawer和 PlusForm 组件的组合，是在 PlusForm 组件上自定义 footer 的基础上构建而来，除下文提到 PlusDrawerForm 特有的属性和方法外，同时支持 PlusForm 组件的所有自定义函数和插槽。

注意

表单v-model绑定的值尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题。 参考 reactive 的局限性

基础用法

自定义表单项

支持 PlusForm 自定义表单项 自定义表单项 的三种(renderField/slot/jsx)方式。

自定义表单 label

支持 PlusForm 自定义表单 label 自定义表单项 的三种(renderLabel/slot/jsx)`方式。

DrawerForm API

DrawerForm Attributes

名称	说明	类型	默认值	是否必须
model-value / v-model	表单绑定 （尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题） 值	objectFieldValues		否
visible / v-model:visible	抽屉显示	boolean	false	否
closeOnClickModal	ElDrawer 的 closeOnClickModal	boolean	false	否
closeOnPressEscape	ElDrawer 的 closeOnPressEscape	boolean	false	否
title	title	string	抽屉表单	否
size	Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释	string/number	540px	否
hasFooter	是否需要底部按钮	boolean	true	否
cancelText	取消按钮文本	string	取消	否
confirmText	确认按钮文本	string	确认	否
confirmLoading	确认按钮 loading	boolean	false	否
form	PlusForm 的 props	objectPlusFormProps	{hasFooter:false}	否
drawer deprecated v0.1.6	ElDrawer 的 props	objectElDrawerProps	{closeOnClickModal:false,closeOnPressEscape:false, title:"抽屉表单"}	否
hasErrorTipv0.0.10	是否需要校验 message 提示	boolean	true	否
... v0.1.6	...	...	...	...

...表示同时支持所有ElDrawer Attributes

DrawerForm Events

名称	说明	类型
submit deprecated v0.0.10	点击确定按钮校验通过触发的事件，已废弃，请使用confirm代替	function
confirmv0.0.10	点击确定按钮校验通过触发的事件	function
cancel	点击取消按钮触发的事件	function
change	表单变化触发的事件	function
submitErrorv0.0.10	点击提交按钮校验不通过触发的事件	function

DrawerForm Slots

插槽名	说明	作用域插槽参数
drawer-header	ElDrawer 的 header slot
drawer-footer	ElDrawer 的 footer slot
form-footer	PlusForm 的 footer slot	{handleReset,handleSubmit}
tooltip-iconv0.0.3	PlusForm 的 tooltip icon
form-group-header	PlusForm 的 group-header slot	{title,columns,icon}
plus-field-*	PlusForm 的自定义表单项，组件会自动根据配置项的 prop 生成对应的插槽	{prop,label,fieldProps,valueType,column}
plus-label-*	PlusForm 的自定义表单项 label，组件会自动根据配置项的 prop 生成对应的插槽	{prop,label,fieldProps,valueType,column}
plus-extra-*	PlusForm的自定义渲染 el-form-item 下一行额外的内容，组件会自动根据配置项的 prop 生成对应的插槽	{column}

Exposes

名称	说明	类型
formInstance	el-form 实例	object
drawerInstance	el-drawer 实例	object