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实例 |