Skip to content

表单 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

名称类型默认值说明
formFnFormItemProps<T>[][]表单配置项
pluginsFn<FormItemProps<any>[]>[][]表单插件(优先级最高 level: 1)

formFn Item Props

名称类型默认值说明
showFnRefAble<boolean, FormPluginsProps<T>>true是否渲染当前配置项 等同于 v-if
widthstring / number100表单列宽度,数字代表百分比,字符会被直接设置于width
keystring / numberindex表单列的 key
slotsRecord<string, Fn> 插槽可自定义渲染表单项或整行
typestring -渲染的组件类型
rulesArrayAble<FormItemRule>[]渲染的表单校验规则
placeholderstring-输入框的占位符
disabledFnRefAble<boolean, FormPluginsProps<T>>false是否禁用
inputPropsInstallCustomType<InputInstance / InputNumberInstance / InputTagInstance>-el-input透传参数
autocompletePropsInstallCustomType<AutocompleteInstance>-el-autocomplete透传参数
cascaderPropsInstallCustomType<CascaderInstance>-el-cascader透传参数
checkboxPropsInstallCustomType<CheckboxGroupInstance & { button: boolean }>-el-checkbox透传参数
checkboxOptionsInstallCustomType<CheckboxInstance>[]-el-checkbox透传参数
checkboxButtonOptionsInstallCustomType<CheckboxInstance>-el-checkbox-button透传参数
colorPickerPropsInstallCustomType<ColorPickerInstance>-el-color-picker透传参数
datePickerPropsInstallCustomType<DatePickerInstance>-el-date-picker透传参数
mentionPropsInstallCustomType<MentionInstance>-el-mention透传参数
radioPropsInstallCustomType<RadioGroupInstance>-el-radio透传参数
radioOptionsInstallCustomType<RadioInstance>[]-el-radio透传参数
ratePropsInstallCustomType<RateInstance>-el-rate透传参数
selectPropsInstallCustomType<InstanceType<typeof ElSelect>>-el-select透传参数
selectOptionsInstallCustomType<InstanceType<typeof ElOption>>[]-el-select透传参数
selectGroupOptionsInstallCustomType<InstanceType<typeof ElOptionGroup> & { selectOptions?: InstallCustomType<InstanceType<typeof ElOption>> }>-el-select透传参数
selectV2PropsInstallCustomType<InstanceType<typeof ElSelectV2>>-el-select-v2透传参数
sliderPropsInstallCustomType<SliderInstance>-el-slider透传参数
switchPropsInstallCustomType<SwitchInstance>-el-switch透传参数
timePickerPropsInstallCustomType<InstanceType<typeof ElTimePicker>>-el-time-picker透传参数
timeSelectPropsInstallCustomType<TimeSelectInstance>-el-time-select透传参数
transferPropsInstallCustomType<TransferInstance>-el-transfer透传参数
treePropsInstallCustomType<TreeInstance>-el-tree透传参数
uploadPropsInstallCustomType<UploadInstance>-el-upload透传参数