M-AdminM-Admin
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
  • 指南

    • 介绍
    • 快速上手
    • 目录结构
    • 路由、菜单
    • 权限管理
    • 系统配置
  • 进阶

    • 网络请求
    • 国际化配置
    • Hooks
    • Store
    • TSX 支持
  • 组件教程

    • MTable
    • MForm
    • MTinymce
    • 季度选择器
    • MSearchForm
  • 其他

    • 项目代码规范
    • 常见问题

MForm

MForm 是基于arco-design-vue的form二次封装的 Form 组件, 支持所有原生参数、事件、插槽,同时增强了部分功能。

使用示例

由于篇幅问题,具体使用场景请查看github。

MFormProps

属性名类型描述默认值
columnsMFormItemProps[]表单项配置--
formData{ [key: string]: any }表单绑定的值{}
layoutLayout表单的布局方式,包括水平、垂直、多列horizontal
sizeSize表单控件的尺寸medium
labelColPropsColProps标签元素布局选项。参数同 <col> 组件一致{ span: 5, offset: 0 }
wrapperColPropsColProps表单控件布局选项。参数同 <col> 组件一致{ span: 19, offset: 0 }
labelAlignAlign标签的对齐方向right
disabledboolean是否禁用表单false
rulesRecord<string, FieldRule | FieldRule[]>表单项校验规则{}
autoLabelWidthboolean是否开启自动标签宽度,仅在 layout="horizontal" 下生效false
idstring表单控件 id 的前缀空
scrollToFirstErrorboolean验证失败后滚动到第一个错误字段false
styleCSSProperties自定义样式
classNamestring自定义类名--
rowConfigRowConfigProps行配置属性--

MFormItemProps

PropertyTypeDescriptionDefault
showboolean是否需要显示true
ordernumber表单项的排序,从小到大排序--
spannumber表单项占据的栅格数--
offsetnumber表单项偏移栅格数--
flexColTypes弹性布局配置--
colPropsanya-col 的其他属性--
fieldstring表单元素在数据对象中的path(数据项必填)--
labelstring标签的文本--
showColonboolean是否显示冒号--
disabledboolean是否禁用false
requiredboolean是否必填false
rulesFieldRule | FieldRule[]表单验证规则--
asteriskPosition'start' | 'end'可选择将星号置于 label 前/后--
hideAsteriskboolean是否隐藏星号false
attrsNewFormItemProps表单项props中除了以上属性以外的--
elFormItemTypes表单项的类型--
propsany表单项参数或者属性,根据arco-design官方文档确定--
render(scope: any) => VNode自定义搜索内容渲染(tsx语法)--

Expose

名称参数返回值说明
onSubmit----表单提交时触发
element--FormInstanceform实例
最近更新:: 2025/6/20 03:53
Contributors: xuyp
Prev
MTable
Next
MTinymce