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