Element Hooks

外观

useForm ​

useForm 在 items 数组中设置表单项。setModel 用于更新表单数据，setItems 用于更新表单项。instance.value 可以调用 validate、resetFields 和 clearValidate 等原生方法。

典型表单 ​

Activity name
Activity zone
please select your zone
Activity time
-
Instant delivery
Activity type
Resources
Activity form

行内表单 ​

Approved by
Activity zone
Activity zone
Activity time

对齐方式 ​

Form Align
Form Item Align
Name
Activity zone
Activity form

表单校验 ​

Activity name
Activity zone
Activity zone
Activity count
Activity count
Activity time
-
Instant delivery
Activity location
Activity type
Resources
Activity form

自定义校验规则 ​

添加/删除表单项 ​

Email
Domain0

数字类型验证 ​

age

尺寸控制 ​


Activity name
Activity zone
please select your zone
Activity time
-
Activity type
Resources

无障碍 ​

Full Name
Your Information

纯元素节点 ​

raw: true 用于渲染不带 el-form-item 的节点，适用于提示文字和分割线。

用户名
密码

API ​

useForm 支持 ElForm 的属性，并增加以下配置。调用 useForm(options) 时，FormOptions<T> 必须包含 model。

  • items — 用于声明表单项的 FormItem<T>[]。
  • model — 初始表单模型 T。调用 useForm(options) 时必填。无参调用 useForm() 时，getModel() 返回 null。

无参调用时，T 默认使用 object。需要通过 getModel() 访问模型字段时，应为 useForm 指定泛型。

FormItem ​

字段说明类型
key表单项的唯一标识string | number
raw是否为纯元素节点（不包裹 el-form-item）boolean
slot默认插槽名（slots.default 的简写）string
slots具名插槽配置Partial<Record<FormItemSlotName, string>>
render渲染组件配置RenderOptions<T>

render.component ​

render.component 可以使用全局组件名称，例如 input 可以映射到 ElInput。

render.props ​

render.props 可以是属性对象，也可以是返回属性对象的函数。函数参数是当前表单模型 model，组件会在渲染时执行该函数。函数中使用的响应式数据变化后，组件属性会自动更新。

事件、格式化器等函数属性会直接传给组件。

ts
import { useForm } from 'element-hooks';
import { ElSelect } from 'element-plus';
import { ref } from 'vue';

const selectOptions = ref([]);
const [Form] = useForm({
  model: { status: 'active' },
  items: [
    {
      render: {
        component: ElSelect,
        props: model => ({
          options: selectOptions.value,
          // model 为当前表单数据
          disabled: model.status !== 'active',
        }),
      },
    },
  ],
});

slot ​

slot 是 slots.default 的简写形式。当同一个表单项同时定义了 slot 和 render 时，插槽优先。

Controller ​

成员说明类型
setState更新整体配置(state: FormOptions<T> | ((prev: FormOptions<T>) => FormOptions<T>)) => void
setItems更新表单项(items: FormItem<T>[] | ((prev: FormItem<T>[]) => FormItem<T>[])) => void
getItems获取当前表单项() => FormItem<T>[]
setModel更新或初始化模型数据(model: T | ((prev: T) => T)) => void
getModel获取当前模型数据() => T | null
instanceElForm 组件实例Ref<FormInstance | null>

模型尚未初始化时，应先通过 setModel 传入模型对象。