Form 表单组件

element-plusForm 组件进行封装,支持 element-plus 的所有表单组件,并额外扩展了一些功能。

Form 组件位于 src/components/Form

用法

refForm

refForm 的简单用法,如果想看更复杂点的例子,请在线预览

<script setup lang="ts">
import { Form } from '@/components/Form'
import { reactive } from 'vue'

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: 'input',
    component: 'Input'
  }
])
</script>

<template>
  <Form :schema="schema" />
</template>

useForm

除了使用 refFrom 的方式外,还可以使用 useForm 进行渲染,如果想看更复杂点的例子,请在线预览

<script setup lang="ts">
import { Form } from '@/components/Form'
import { reactive } from 'vue'
import { useForm } from '@/hooks/web/useForm'

const schema = reactive<FormSchema[]>([
  {
    field: 'field1',
    label: 'input',
    component: 'Input'
  }
])

const { register } = useForm({
  schema
})
</script>

<template>
  <Form />
</template>

参数介绍

const { register, elFormRef, methods } = useForm(props)

props

详见

register

register 用于注册 useForm,如果需要使用 useForm 提供的 api,必须将 register 传入组件的 onRegister

elFormRef

当前 elForm 实例,可使用所有 elForm 实例方法。

methods

方法名说明回调参数
setValues用于设置表单值(data: Recordable) => void
setProps用于设置表单属性(props: Recordable) => void
delSchema用于删除表单结构(field: string) => void
addSchema用于新增表单结构(formSchema: FormSchema, index?: number) => void
setSchema用于编辑表单结构(schemaProps: FormSetPropsType[]) => void
getFormData用于获取表单数据<T = Recordable>() => Promise<T>

Form 属性

除以下参数外,还支持 element-plusForm 所有属性,详见

属性说明类型可选值默认值
schema生成 Form 的布局结构数组,详见FormSchema-[]
isCol是否需要栅格布局boolean-true
model表单数据对象Recordable-{}
autoSetPlaceholder是否自动设置 placeholderboolean-true
isCustom是否自定义内容boolean-false
labelWidth表单 label 宽度string/number-auto

Schema

属性说明类型可选值默认值
field唯一值,必填项string--
label标题string--
labelMessage (1.1.7新增)表单项说明string--
colPropselement-plus 的 col 组件属性ColProps--
componentProps表单组件子属性,详见{ slots?: Recordable } & ComponentProps--
formItemPropselement-plus 的 form-item 组件属性,详见FormItemProps--
component需要渲染的表单子组件ComponentName--
value表单子组件初始值FormValueType--
hidden表单子组件是否隐藏boolean--
api加载 options 方法,只在 useCrudSchema 有效<T = any>() => AxiosPromise<T>--

ComponentProps

除以下属性外,还支持 component 对应的组件所有属性。

属性说明类型可选值默认值
optionsAliasoptions 别名ComponentOptionsAlias--
optionsoptions 数据ComponentOptions--
optionsSlotoptions 插槽boolean--

FormItemProps

属性说明类型可选值默认值
labelWidth标题的宽度string/number--
required是否必填boolean--
rules自定义表单验证Recordable--
error验证不通过展示的提示string--
showMessage验证不通过是否展示提示boolean--
inlineMessage是否以行内形式展示验证提示boolean--
style子表单项的样式CSSProperties--

Form 方法

方法名说明回调参数
setValues用于设置表单值(data: Recordable) => void
setProps用于设置表单属性(props: Recordable) => void
delSchema用于删除表单结构(field: string) => void
addSchema用于新增表单结构(formSchema: FormSchema, index?: number) => void
setSchema用于编辑表单结构(schemaProps: FormSetPropsType[]) => void
getElFormRef用于获取 element-plusForm 组件实例() => ComponentRef<typeof ElForm>

Form 插槽

插槽名说明子标签
-存放所有的 form-item 内容,或者其他标签内容FormItem
${field}form-item 的内容,可用于自定义表单项组件内容-
${field}-labelform-item 标题上显示的自定义内容。-
${field}-errorform-item 自定义内容以显示验证消息。-

如何新增表单子组件

当项目中内置的表单组件不满足需求时,可以自行添加组件进去。

  1. src/types/componentType/form.d.tsComponentName 添加你组件名称。
  2. src/components/Form/src/componentMap.ts 引入你自己的组件,并在 componentMap 对象中添加键值对即可。