MaForm

基于 Element plus 的表单二次封装的 Form 组件，支持所有原生表单的参数、事件、插槽、写法，还支持通过配置方式来实现。 另外还支持了基于 el-row 和 el-space 的布局来规划表单

说明

由于全部兼容及支持原生 el-from 的所有参数、事件、插槽，所以只讲扩展参数。

官方表单参数请参考 Element plus 官方文档。

配置方式使用

模板方式使用

获取组件和el-form-item的Ref

提示

这个方式用于 配置形式，template 里可以自己定义 ref

Props

参数	说明	类型	Ele-官网文档	版本
v-model	ma-form数据，双向绑定	MaModel	-	1.0.0
options	el-form 参数及扩展参数	MaFormOptions	表单属性	1.0.0
items	ma-form-item参数	MaFormItem[]	-	1.0.0

ExtraProps

说明

此为 ma-form 对 el-form 的扩展参数

参数	说明	类型	默认值	版本
containerClass	表单容器类名	string	-	1.0.0
loading	是否开启加载动画	boolean	false	1.0.0
loadingConfig	加载动画的相关配置	LoadingConfig	-	1.0.0
layout	鼠标放上查看	flex, grid	flex	1.0.0
grid	鼠标放上查看	el-space文档	-	1.0.0
flex	鼠标放上查看	el-row文档	-	1.0.0
footerSlot	鼠标放上查看	() => {}	-	1.0.0

LoadingConfig说明

参数	说明	类型	默认值	版本
text	显示在加载图标下方的加载文案	string	-	1.0.0
spinner	自定义加载图标	string	-	1.0.0
svg	自定义 svg 加载图标	string	-	1.0.0
viewBox	加载图标的大小	string	-	1.0.0
background	背景遮罩的颜色	string	-	1.0.0
customClass	自定义 class 类名	string	-	1.0.0

MaFormItem

参数	说明	类型	默认值	版本
label	增强原生参数，添加支持函数类型	string, () => string	-	1.0.0
prop	增强原生参数，添加支持函数类型	string, () => string	-	1.0.0
hide	鼠标放上查看	鼠标放上查看	false	1.0.0
show	鼠标放上查看	鼠标放上查看	true	1.0.0
cols	在 options.layout 为 flex 下生效	el-col文档	-	1.0.0
itemProps	el-form-item 原生属性	表单项属性	-	1.0.0
itemSlots	el-form-item 原生插槽	表单项插槽	-	1.0.0
render	渲染组件：鼠标放上查看	string, (data) => any	-	1.0.0
renderProps	被渲染组件的 props 属性	Record<string, any>	-	1.0.0
renderSlots	被渲染组件的插槽	Record<string, (...args) => {}>	-	1.0.0

Slot

名称	说明	参数
default	默认插槽，可写原生标签 <el-form-item>，配置方式自动失效	-
footer	表单底部插槽	-

Expose

名称	说明	参数	返回值
setLoadingState()	设置表单 loading 状态	(boolean)	-
setOptions()	设置 ma-form 配置	(MaFormOptions)	-
getOptions()	获取 ma-form 配置	-	MaFormOptions
setItems()	设置表单项	(MaFormItem[])	-
getItems()	获取表单项	-	MaFormItem[]
appendItem()	追加表单项	(MaFormItem)	-
removeItem()	移除表单项	(prop: string)	-
getItemByProp()	按prop获取表单项	(prop: string)	MaFormItem
isMobileState()	检查是否为移动端模式	-	boolean
getElFormRef()	获取 el-form Ref	-	El-Form