WetProForm 高级表单

基本介绍

WetProForm 在原来的 ElForm 的基础上增加了一些语法糖和更多的布局设置，帮助我们快速地开发一个表单，同时添加了一些默认行为，让我们的表单默认好用。

引入方法: import { WetProForm } from '@wetspace/pro-components

不仅如此，而且还集成了：分步表单、Modal 表单、Drawer 表单、查询表单、轻量筛选等多种 layout 可以覆盖大部分的使用场景，让我们脱离复杂而且繁琐的表单布局工作，用更少的代码完成更多的功能

基本使用

当你想快速实现一个表单但不想花太多时间去布局时，管理太多的表单状态时 WetProForm 是最好的选择。

WetProForm 是基于 Element-Plus 的封装，与 Element-Plus 功能完全对齐，但是在其之上还增加一些预设行为和多种布局。这些布局之间可以无缝切换，并且拥有公共的 API。

使用WetProForm 一般是和WetProFormItem加上自定义的表单项组件或Element-Plus提供的表单项组成

注意点:

1. 值的初始化，设置了初始值，请勿轻易改动初始值对象，否则整个表单会被重置到初始值状态
2. 使用了值的初始化后，默认重置表单就是重置到初始值状态，若需要清空表单需要在实例方法的reset(true)即可

标题和布局

栅格化布局

可以在WetProForm上 配置ColProps属性，例如span,这里配置的ColProps属性优先级低于WetProFormItem配置的ColProps属性

标签配置

1. 可以在WetProForm上设置labelWidth属性，全局控制标签大小，优先级低于WetProFormItem上的配置

2. 可以在WetProFormItem上设置labelColor属性，改变标签颜色

3. 可以在WetProFormItem上设置description属性，增加标签说明

示例：

表单联动

推荐使用WetFormDependencys组件,具体可参考WetFormDependencys组件文档

属性

没有列出来的属性，都继承了ElForm

属性	描述	类型	默许值
colSpan	响应式栅格布局	Partial<ColProps>	-
span	栅格布局	number	24
gutter	栅格间隔	number	20
disabled	表单全局是否禁用	boolean	-
initalValues	表单值全局初始化	any	-
valueEmptyModel	表单值对空值的输出模式，null表示空值输出为null，filter表示空值属性不输出	'null' | 'filter'	-
labelWidth	全局性的标签宽度控制	'number'|'string'	-

组件事件

方法名	描述	类型	参数说明
change	表单输入有变化时触发	(key:string|string[],formValue:any）=> void	key:输入变化的字段；formValue:表单数据

实例方法（Exposes）

方法名	描述	类型	参数说明
submit	表单提交，若配置了校验规则，则自动触发校验	() => Promise<any>	-
reset	标题重置	(isClear?: boolean) => void	isClear:表示是否清空表单数据，默认为false
validateField	验证对应表单项值	(prop?: string | string[]) => void	prop:配置的表单项字段
clearValidate	清除验证对应表单项值的结果	(prop?: string | string[]) => void	prop:配置的表单项字段
getFieldsValue	获取对应字段的值，不传则获取全部数据	(prop?: string | string[]) => any	prop:配置的表单项字段
setFieldsValue	设置对应字段的值	(prop: string | string[], v: any)	prop:配置的表单项字段
scrollToField	定位到对应字段位置	(prop: string | string[]) => void	prop:配置的表单项字段

插槽

名称	说明	类型
actions	操作区插槽	-