用 JSON 驱动 Vue 表单：FormCreate 3.2 新增 AntdvNext 与 TinyVue 适配

预计阅读时间：9 分钟

前端表单永远是项目里最琐碎的部分——字段多、联动复杂、校验规则各不相同，手写一遍还行，十个表单下来代码量就失控了。FormCreate 的思路很直接：把表单结构写成 JSON，由组件动态渲染、收集、校验、提交，不再逐个手写模板。3.2 版本新增了对 Ant Design Vue Next（AntdvNext）和 TinyVue 的适配，8 个主流 UI 框架的覆盖基本补齐。

JSON 即表单：核心工作方式

FormCreate 的入口只有一个——一段 JSON 规则。组件拿到规则后自动渲染对应 UI 组件、绑定数据、挂载校验，最终把填写结果以对象形式吐出来。

一个最简的规则长这样：

[
  {
    "type": "input",
    "field": "username",
    "title": "用户名",
    "props": { "placeholder": "请输入用户名" },
    "validate": [
      { "required": true, "message": "用户名不能为空" }
    ]
  },
  {
    "type": "password",
    "field": "password",
    "title": "密码",
    "props": { "placeholder": "请输入密码" },
    "validate": [
      { "required": true, "message": "密码不能为空" },
      { "min": 6, "message": "密码至少6位" }
    ]
  }
]

type 映射到 UI 框架的具体组件（比如 Element Plus 的 ElInput、AntdvNext 的 a-input），field 是最终数据对象的键名，validate 直接对接各框架的校验规则格式。换框架只换安装包，JSON 规则不用改。

八框架适配，切换成本接近零

3.2 之前已覆盖 Element Plus、Element UI、Ant Design Vue 3.x、Naive UI、Arco Design、Vant（移动端）、iView / ViewDesign。这次补上的两个：

AntdvNext——Ant Design Vue 的 Vue3 新版本分支，组件 API 有调整，FormCreate 做了对应映射。
TinyVue——华为开源的轻量 UI 库，企业项目里使用量在增长。

实际切换方式就是换安装包和注册入口，规则层不动：

# Element Plus 版
npm install @form-create/element-ui

# AntdvNext 版
npm install @form-create/ant-design-vue-next

# TinyVue 版
npm install @form-create/tiny-vue

注册时各版本导出不同，但 API 一致：

// main.js — 以 Element Plus 为例
import formCreate from '@form-create/element-ui'
app.use(formCreate)

// 切到 AntdvNext 只改这两行
import formCreate from '@form-create/ant-design-vue-next'
app.use(formCreate)

组件使用方式完全相同，后面会给出完整示例。

内置组件与自定义组件的边界

内置 20 种常用类型：input、select、radio、checkbox、switch、datePicker、timePicker、cascader、upload、rate、slider、tree、treeSelect、colorPicker、number、textarea、password、editor（富文本）、group（子表单）、object（嵌套对象）。覆盖了绝大多数后台表单场景。

遇到内置不够用的情况，type 字段可以直接填自定义组件名：

{
  "type": "MyCustomPicker",
  "field": "customField",
  "title": "自定义选择器",
  "props": { "mode": "multi" }
}

只要 MyCustomPicker 已全局注册或通过 formCreate 的组件注册接口挂上去，规则里就能直接引用，渲染、取值、校验流程和内置组件一致。

实践：一个可运行的动态登录表单

下面用 Element Plus 版写一个完整的最小示例，可以直接复制到项目中运行。如果你用的是 AntdvNext 或 TinyVue，只改安装包和 import 路径即可。

npm install @form-create/element-ui element-plus

<!-- LoginForm.vue -->
<template>
  <div style="max-width: 400px; margin: 40px auto;">
    <form-create
      v-model="formData"
      :rule="formRule"
      :option="formOption"
      @submit="onSubmit"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})

// 表单规则——换框架时这段不用动
const formRule = ref([
  {
    type: 'input',
    field: 'username',
    title: '用户名',
    props: { placeholder: '请输入用户名', clearable: true },
    validate: [
      { required: true, message: '用户名不能为空' },
      { min: 3, message: '至少3个字符' }
    ]
  },
  {
    type: 'password',
    field: 'password',
    title: '密码',
    props: { placeholder: '请输入密码', showPassword: true },
    validate: [
      { required: true, message: '密码不能为空' },
      { min: 6, message: '至少6位' }
    ]
  },
  {
    type: 'select',
    field: 'role',
    title: '角色',
    props: { placeholder: '选择角色' },
    options: [
      { value: 'admin', label: '管理员' },
      { value: 'editor', label: '编辑' },
      { value: 'viewer', label: '观察者' }
    ],
    validate: [
      { required: true, message: '请选择角色' }
    ]
  }
])

// 表单行为配置
const formOption = ref({
  submitBtn: { innerText: '登录' },
  resetBtn: { innerText: '重置' }
})

function onSubmit(formData) {
  console.log('提交数据:', formData)
  // 这里接实际请求
}
</script>

运行后你会看到一个带校验的登录表单，点击"登录"触发 onSubmit，点击"重置"清空所有字段。formData 始终和表单双向同步，外部也能直接读取或赋值。

动态联动：规则可以随时修改

FormCreate 的规则是响应式的——运行时修改 formRule 数组，界面立刻更新。这比手写 v-if + watch 要干净得多。

典型场景：角色选"管理员"时才显示权限范围字段：

import { watch } from 'vue'

watch(() => formData.value.role, (role) => {
  const permIndex = formRule.value.findIndex(r => r.field === 'permissionScope')
  if (role === 'admin') {
    if (permIndex === -1) {
      formRule.value.push({
        type: 'checkbox',
        field: 'permissionScope',
        title: '权限范围',
        options: [
          { value: 'user_mgmt', label: '用户管理' },
          { value: 'data_mgmt', label: '数据管理' },
          { value: 'system_cfg', label: '系统配置' }
        ]
      })
    }
  } else {
    if (permIndex !== -1) {
      formRule.value.splice(permIndex, 1)
      delete formData.value.permissionScope
    }
  }
})

增删规则项即可，不需要在模板里堆条件渲染。

选框架前想清楚的事

FormCreate 解决的是"表单结构复用"问题，不是所有 UI 问题。几个实际取舍点：

后台管理项目——字段多、表单重复度高，JSON 驱动收益最大，强烈建议引入。
交互型表单（拖拽排序、实时预览、复杂嵌套布局）——FormCreate 的规则层能覆盖大部分，但极端定制场景可能需要直接写组件再通过自定义 type 挂入。
移动端——Vant 版已适配，H5 表单场景同样适用。
Vue2 项目——有对应的 @form-create/element-ui Vue2 版本，API 基本一致，升级路径清晰。

一个简单的采纳检查清单：

项目中超过 5 个结构相似的表单？→ 值得用。
表单字段经常由后端配置动态决定？→ JSON 规则直接存接口返回值，非常契合。
团队对某个 UI 框架已锁定？→ 安装对应包即可，不需要纠结。
表单有大量非标准交互？→ 先用自定义组件挂入评估，不够再考虑手写。

FormCreate 3.2 把主流 UI 框架的覆盖基本做完了，JSON 规则跨框架复用的承诺也落地了。如果你的项目表单多、变动频繁，花半小时把上面的示例跑起来，再拿一个真实表单的规则试一遍，投入产出比会很直观。