我开源了一个 Vue 3 动态表单组件库 —— real-vue3-easy-form

还在手写 <el-form-item> 吗？试试这个------写一份 JSON 配置，表单自动生成。

一句话介绍

real-vue3-easy-form 是一个基于 Vue 3 + Element Plus 的动态表单组件库。你只需要写一份字段配置数组，它就能自动渲染出完整的 Element Plus 表单，支持 20+ 种字段类型。

📦 npm 地址： https://www.npmjs.com/package/real-vue3-easy-form

为什么要用它？

传统写法 vs 用这个库：

传统写法（手写每一个字段）：

vue 复制代码

<el-form :model="form">
  <el-form-item label="姓名">
    <el-input v-model="form.name" />
  </el-form-item>
  <el-form-item label="性别">
    <el-select v-model="form.gender">
      <el-option label="男" value="male" />
      <el-option label="女" value="female" />
    </el-select>
  </el-form-item>
  <!-- 还有 10 个字段...手写吐血 -->
</el-form>

用 real-vue3-easy-form：

vue 复制代码

<DynamicForm :fields="fields" v-model="formData" />

字段配置写到 fields 数组里，一行配置 = 一个表单项，10 个字段也只需要 10 行配置。

🚀 快速上手

安装

bash 复制代码

npm install real-vue3-easy-form

引入

js 复制代码

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import EasyForm from 'real-vue3-easy-form'
import 'real-vue3-easy-form/dist/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(EasyForm)

写配置，渲染表单

vue 复制代码

<template>
  <DynamicForm :fields="fields" v-model="formData" @submit="onSubmit" />
</template>

<script setup>
import { reactive } from 'vue'
import { DynamicForm } from 'real-vue3-easy-form'

const fields = [
  { type: 'text',     label: '姓名',   prop: 'name',  required: true },
  { type: 'select',   label: '性别',   prop: 'gender',
    options: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }] },
  { type: 'date',     label: '生日',   prop: 'birthday' },
  { type: 'textarea', label: '简介',   prop: 'bio' },
]

const formData = reactive({})

const onSubmit = (values) => {
  console.log('提交数据:', values)
}
</script>

✨ 支持的字段类型（20+ 种）

类别	字段类型
输入类	text、password、textarea、number
选择类	select、radio、checkbox、switch、slider
日期时间类	date、time、datetime
树形选择	tree_select（单选/多选）
高级组件	rate、color_picker、icon_select、editor（富文本）
上传类	image、file
字段列表	fieldlist（动态添加多条记录）

🔥 进阶功能

动态显隐字段

根据其他字段的值，自动显示/隐藏某个字段：

js 复制代码

// 当 name 等于"张三"时，显示 address 字段
{ type: 'text', label: '详细地址', prop: 'address', favisible: 'name=张三' }

草稿自动保存

开启后，表单数据自动存入 localStorage，刷新页面不丢数据：

vue 复制代码

<DynamicForm :fields="fields" v-model="formData" :enable-draft="true" />

通过 ref 调用表单方法

vue 复制代码

<DynamicForm ref="formRef" ... />

<script setup>
const formRef = ref()

// 验证表单
await formRef.value?.validate()

// 重置表单
formRef.value?.reset()

// 获取数据
const data = formRef.value?.getData()
</script>

📊 包信息

项目	信息
包名	`real-vue3-easy-form`
当前版本	v1.0.4
协议	MIT
依赖	Vue 3.2+ / Element Plus 2.2+
包大小	~381 KB
TypeScript	✅ 完整类型定义

总结

如果你在用 Vue 3 + Element Plus 做后台管理系统，这个库可以帮你省掉 70% 的表单模板代码。

项目地址：

📦 npm： https://www.npmjs.com/package/real-vue3-easy-form
💻 完整文档： 安装后在 node_modules/real-vue3-easy-form/README.md

欢迎 npm install 试用，有问题欢迎提 Issue！

觉得有用？点个 Star ⭐ 吧～