ProForm | JView UI

ProForm —— Vue3 表单解决方案。

基本用法

ProForm 旨在简化表单的使用，内置了常见的表单组件类型，您只需要通过设置valueType属性，即可轻松使用诸多表单组件。

扩展 !== 裁剪

原则：封装的目的是扩展组件原有功能，在封装过程中切忌抹杀掉组件的本身能力。

因此，我们同样支持各个表单组件本身的属性/事件/插槽，你完全不用担心因为用了 ProForm 而丢失部分原有能力。

自定义渲染

属性

参数	说明	类型	默认值	必填
options	传递一些附带配置，可以持续扩展	`ProFormOptions`	无	否
writeBackForm	用来回写表单的数据对象	`PlainObject`	无	否
formItems	由N个表单项配置组成的数组	`Array<ProFormItem>`	无	否
labelWidth	提供统一的 label 宽度，视觉效果更统一	`string`	无	否
useButtons	是否使用底部表单按钮，如果不使用，您也可以选择自行渲染	`boolean`	`true`	否
onSubmit	表单提交时触发的函数，需要返回 Promise，或者用 async 函数	`GeneralFunction<unknown>`	无	否
cancelText	取消按钮文案	`string`	`'取消'`	否
hideCancel	是否隐藏取消按钮	`boolean`	`false`	否
submitText	提交按钮文案	`string`	`'保存'`	否
useGrid	是否采用栅格布局，仅在 layout=inline 时有效	`boolean`	`true`	否
fixedCol	固定栅格，会让 isResponsive 失效	`string` \| `number` \| `false`	`false`	否
isResponsive	是否响应式计算栅格，前提是 useGrid	`boolean`	`true`	否
rowProps	配置栅格布局对应的Row组件的props	`PlainObject`	无	否
disabled	表单整体禁用的控制属性	`boolean`	`false`	否
sorted	是否已经排过序，避免重复排序	`boolean`	`false`	否
antFormRef	支持指定 ant-form ref，方便操作 a-form，但是不要滥用，否则可能与 ProForm 本身预设的行为不一致	`Ref<any>`	无	否
autoFill	表单项内容是否自动填充剩余区域	`boolean`	`true`	否
enablePatch	如果启用，还可以配合隐藏域传其他字段，TODO: 还需要重新考虑一下设计	`boolean`	`false`	否
hiddenFields	隐藏域字段列表	`Array<string>`	无	否