表单 Formx
组件el-formx
完全等同于el-form
,可以完全平替使用,组件本身未做任何更改。
基础使用
同el-tablex
一样,el-formx
仅在el-form
基础上增加一个属性formFn
, 接收一个数组,用于配置相应的表单项,所有属性均透传至el-form-item
。`
INFO
推荐使用 Hook useFormFn
提供配置项提示以及对应类型检查。
表单配置
el-formx
兼容了所有的 element-plus 表单组件, 通过配置项的type
属性可指定需要渲染的组件。
TIP
原则上,type
的属性即为el-xxx
的组件名。 例如:type="input"
,则渲染el-input
组件。 同时对应的组件参数 Props 属性为${type}Props
,例如:type="input"
,则透传 Props 属性为inputProps
。以下是一些例外情况
el-input-number
透传 input 的 inputProps 属性type
设置为input-number
时渲染el-input-number
组件
el-input-tag
透传 input 的 inputProps 属性type
设置为input-tag
时渲染el-input-tag
组件
el-checkbox-button
透传 checkbox 的 checkboxProps 属性button
设置为true
时渲染el-checkbox-button
组件。
同时 checkbox 的 options 通过 checkboxOptions
属性传入。
el-radio-button
透传 radio 的 radioProps 属性button
设置为true
时渲染el-radio-button
组件。
同时 radio 的 options 通过 radioOptions
属性传入。
el-option-group
通过 selectGroupOptions 属性渲染el-option-group
组件, 同时通过selectOptions
渲染嵌套选项
此外 select 的 options 通过 selectOptions
属性传入。
Formx Props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
formFn | FormItemProps<T>[] | [] | 表单配置项 |
plugins | Fn<FormItemProps<any>[]>[] | [] | 表单插件(优先级最高 level: 1) |
formFn Item Props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
show | FnRefAble<boolean, FormPluginsProps<T>> | true | 是否渲染当前配置项 等同于 v-if |
width | string / number | 100 | 表单列宽度,数字代表百分比,字符会被直接设置于width |
key | string / number | index | 表单列的 key |
slots | Record<string, Fn> | 插槽 | 可自定义渲染表单项或整行 |
type | string | - | 渲染的组件类型 |
rules | ArrayAble<FormItemRule> | [] | 渲染的表单校验规则 |
placeholder | string | - | 输入框的占位符 |
disabled | FnRefAble<boolean, FormPluginsProps<T>> | false | 是否禁用 |
inputProps | InstallCustomType<InputInstance / InputNumberInstance / InputTagInstance> | - | el-input 透传参数 |
autocompleteProps | InstallCustomType<AutocompleteInstance> | - | el-autocomplete 透传参数 |
cascaderProps | InstallCustomType<CascaderInstance> | - | el-cascader 透传参数 |
checkboxProps | InstallCustomType<CheckboxGroupInstance & { button: boolean }> | - | el-checkbox 透传参数 |
checkboxOptions | InstallCustomType<CheckboxInstance>[] | - | el-checkbox 透传参数 |
checkboxButtonOptions | InstallCustomType<CheckboxInstance> | - | el-checkbox-button 透传参数 |
colorPickerProps | InstallCustomType<ColorPickerInstance> | - | el-color-picker 透传参数 |
datePickerProps | InstallCustomType<DatePickerInstance> | - | el-date-picker 透传参数 |
mentionProps | InstallCustomType<MentionInstance> | - | el-mention 透传参数 |
radioProps | InstallCustomType<RadioGroupInstance> | - | el-radio 透传参数 |
radioOptions | InstallCustomType<RadioInstance>[] | - | el-radio 透传参数 |
rateProps | InstallCustomType<RateInstance> | - | el-rate 透传参数 |
selectProps | InstallCustomType<InstanceType<typeof ElSelect>> | - | el-select 透传参数 |
selectOptions | InstallCustomType<InstanceType<typeof ElOption>>[] | - | el-select 透传参数 |
selectGroupOptions | InstallCustomType<InstanceType<typeof ElOptionGroup> & { selectOptions?: InstallCustomType<InstanceType<typeof ElOption>> }> | - | el-select 透传参数 |
selectV2Props | InstallCustomType<InstanceType<typeof ElSelectV2>> | - | el-select-v2 透传参数 |
sliderProps | InstallCustomType<SliderInstance> | - | el-slider 透传参数 |
switchProps | InstallCustomType<SwitchInstance> | - | el-switch 透传参数 |
timePickerProps | InstallCustomType<InstanceType<typeof ElTimePicker>> | - | el-time-picker 透传参数 |
timeSelectProps | InstallCustomType<TimeSelectInstance> | - | el-time-select 透传参数 |
transferProps | InstallCustomType<TransferInstance> | - | el-transfer 透传参数 |
treeProps | InstallCustomType<TreeInstance> | - | el-tree 透传参数 |
uploadProps | InstallCustomType<UploadInstance> | - | el-upload 透传参数 |