表单 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透传参数 |