MForm
MForm 是基于arco-design-vue的form二次封装的 Form 组件， 支持所有原生参数、事件、插槽，同时增强了部分功能。
使用示例
由于篇幅问题，具体使用场景请查看github。
MFormProps
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| columns | MFormItemProps[] | 表单项配置 | -- |
| formData | { [key: string]: any } | 表单绑定的值 | {} |
| layout | Layout | 表单的布局方式，包括水平、垂直、多列 | horizontal |
| size | Size | 表单控件的尺寸 | medium |
| labelColProps | ColProps | 标签元素布局选项。参数同 <col> 组件一致 | { span: 5, offset: 0 } |
| wrapperColProps | ColProps | 表单控件布局选项。参数同 <col> 组件一致 | { span: 19, offset: 0 } |
| labelAlign | Align | 标签的对齐方向 | right |
| disabled | boolean | 是否禁用表单 | false |
| rules | Record<string, FieldRule | FieldRule[]> | 表单项校验规则 | {} |
| autoLabelWidth | boolean | 是否开启自动标签宽度，仅在 layout="horizontal" 下生效 | false |
| id | string | 表单控件 id 的前缀 | 空 |
| scrollToFirstError | boolean | 验证失败后滚动到第一个错误字段 | false |
| style | CSSProperties | 自定义样式 | |
| className | string | 自定义类名 | -- |
| rowConfig | RowConfigProps | 行配置属性 | -- |
MFormItemProps
| Property | Type | Description | Default |
|---|---|---|---|
| show | boolean | 是否需要显示 | true |
| order | number | 表单项的排序，从小到大排序 | -- |
| span | number | 表单项占据的栅格数 | -- |
| offset | number | 表单项偏移栅格数 | -- |
| flex | ColTypes | 弹性布局配置 | -- |
| colProps | any | a-col 的其他属性 | -- |
| field | string | 表单元素在数据对象中的path（数据项必填） | -- |
| label | string | 标签的文本 | -- |
| showColon | boolean | 是否显示冒号 | -- |
| disabled | boolean | 是否禁用 | false |
| required | boolean | 是否必填 | false |
| rules | FieldRule | FieldRule[] | 表单验证规则 | -- |
| asteriskPosition | 'start' | 'end' | 可选择将星号置于 label 前/后 | -- |
| hideAsterisk | boolean | 是否隐藏星号 | false |
| attrs | NewFormItemProps | 表单项props中除了以上属性以外的 | -- |
| el | FormItemTypes | 表单项的类型 | -- |
| props | any | 表单项参数或者属性，根据arco-design官方文档确定 | -- |
| render | (scope: any) => VNode | 自定义搜索内容渲染（tsx语法） | -- |
Expose
| 名称 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| onSubmit | -- | -- | 表单提交时触发 |
| element | -- | FormInstance | form实例 |