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