CommonForm公共表单

公共表单。

基础使用

默认

字段1:

字段2:

small

字段1:

字段2:

default

字段1:

字段2:

large

字段1:

字段2:

loading

字段1:

字段2:

readonly

字段1:

选项1

字段2:

/

展开代码

复制代码

表单默认参数

main.ts中使用

registerComponentDefaultPropsMap({
  CommonForm: {
    size: 'large', //大小配置
    col: {
      //默认列配置
      sm: 24,
      md: 12,
      lg: 8,
      xl: 6,
    },
    //...其他elForm参数
  },
});

span设置宽度

字段1:

请选择字段1

字段2:

字段2:

展开代码

复制代码

隐藏字段

字段1:

请选择字段1

字段2:

展开代码

复制代码

切换组件

字段1:

请选择字段1

字段2:

展开代码

复制代码

禁用字段

字段1:

请选择字段1

字段2:

展开代码

复制代码

函数式配置参数

例如elSelect的change事件 commonForm统一对函数式配置追加参数

字段1:

请选择字段1

展开代码

复制代码

字段插槽

字段1:

字段2:

{ "field": "test2", "label": "字段2", "span": 24 }

展开代码

复制代码

校验规则

字段1:

字段2:

展开代码

复制代码

API

方法	说明
validateForm	表单校验
getFormData	获取表单数据
...	其它elForm暴露的方法

Props

属性	说明	类型	默认值
config	组件生成配置	CommonFormConfig[]	无
...	其它elForm参数	CommonFormProps	无

CommonFormConfig对象参数

属性	说明	类型	必填
component	指定使用的表单组件名称，如 'input', 'select' 等,默认input	string	否
span	表单项在布局中占的列数（基于 24 栅格系统）	number	否
hidden	控制表单项是否隐藏，支持布尔值或函数	boolean | ({formData: any, configItem: any}) => boolean	否
isDisabled	控制表单项是否禁用	boolean | (formData: any, configItem: any) => boolean	否
labelField	自定义标签显示字段名	string	否
formItemProps	传递给 el-form-item 的额外属性	{ labelWidth?: string; [key: string]: any }	否
rules	表单验证规则，可以是数组或返回规则的函数	Array<FormItemRule> | (formData: any, item: CommonFormConfig) => Array<FormItemRule>	否