动态表单

动态表单集成功能

• 输入类组件，可参考 Input类型 (text, number, integer, switch, radio, checkbox, update, select, cascader, tree)等。

• 栅格布局，通过简单的类栅格配置能实现通用的布局。

• 表单校验，通过简单的配置，就能支持通用强大的校验功能。

• 格式化数据，配置不同类型数据，直接提交获取的数据。

动态表单示例

动态表单通用配置

FormProps

参数名	说明	类型	默认值
title	字段名	string
model-value (v-model)	绑定值	Record<string, any>	-
fields	表单配置	FormItemProps[]	-
size	输入框大小	'small' , 'large' , 'default'
cols	表单列	number	-
hideFooter	隐藏footer	boolean	false
labelWidth	label宽	number	80
labelPosition	label位置	'left' , 'right' , 'top'	right

FormItemProps

参数名	说明	类型	默认值
prop	字段名	string
type	类型	text, number, switch, radio, checkbox, datetime, select, cascader, treeselect等	-
multiple	单选，多选	boolean	false
clearable	是否可清空	boolean	true
disabled	是否禁用	boolean	false
visiable	是否显示	boolean	true
required	是否必填	boolean	false
placeholder	文本输入的占位符	string
fieldNames	字段转换	Record<'label','value', any>
options	选项列表	Options[]
code	字典名	string
rules	校验规则	Record<string, any>[]
tips	字段注释	string
label	字段名称	string
validator	校验	(rule, value, callback) => boolean

Events

名称	说明	类型
update:modelValue	修改响应式数据	(value) => void
submit	提交表单	(formData) => void
reset	重置表单	() => void

注意事项

说明

动态表单组件属性字段样式已封装，输入类组件需要扩展功能请参考 Element-Plus Input 文档查阅