element-plus-formkit

element-plus-formkit 是基于 Vue3 和 ElementPlus 的数据驱动表单框架。通过组合封装与数据流处理，让复杂的表单及校验开发更简单快捷、高性能。

开始源码地址

简单至上

通过一个配置数组描述整个表单，面对复杂的表单以及其校验项，快速开发。

数据驱动

基于 ElementPlus 对表单组件进行组合封装，通过数据流的方法对表单数据进行处理，支持条件显隐（visible）与字段联动。

高性能

element-plus-formkit 为每个组件的加载完全符合 Vue3 异步组件方案，配合 Suspense 骨架屏按需加载，打包体积更小。

丰富的内置组件

内置 20+ 常用表单组件（select、remoteSearchSelect、address、cascader、datePicker、upload、treeSelect、mention 等），开箱即用。

远程数据加载

通过 requester / handler 为 select、radio、checkbox 等组件异步拉取选项数据，并支持错误兜底与 error 事件回调。

灵活布局

支持 columns 多列布局、span / col 栅格配置、gap 间距设置，以及 labelWidth 'auto' 自动测量标签宽度。

可扩展

通过 registerModule 注册自定义表单组件，与内置模块享有相同的数据流与校验能力。

完整的表单能力

继承 ElementPlus 表单体系，暴露 validate、clearValidate、resetFields、validateField、scrollToField 等完整 API，支持 TypeScript。

快速体验

pnpm add element-plus-formkit

<template>
  <FormKit v-model="form" :config="config" :columns="2" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FormKit from 'element-plus-formkit'

const form = ref({ name: '', gender: '', birthday: '' })

const config = [
  { type: 'input', key: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
  { type: 'radio', key: 'gender', label: '性别', options: [{ label: '男', value: 1 }, { label: '女', value: 2 }] },
  { type: 'datePicker', key: 'birthday', label: '出生日期' }
]
</script>

只需一个配置数组，即可渲染出带校验、带布局的完整表单。查看文档开始 →

谁在使用

以下企业和机构正在生产环境中使用 element-plus-formkit（排名不分先后）：

同庆楼

如果你的企业也在使用 element-plus-formkit，欢迎提交 Issue 或 PR，将 Logo 展示在这里。