首页
/ 表单开发从入门到精通：动态表单与数据联动的完整解决方案

表单开发从入门到精通：动态表单与数据联动的完整解决方案

2026-04-29 09:24:35作者：秋阔奎Evelyn
formily
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
项目地址：https://gitcode.com/gh_mirrors/fo/formily

你是否还在为复杂表单开发中的数据联动繁琐、校验规则复杂、UI组件适配困难而头疼？作为前端开发工程师，我们经常面临这些挑战。本文将带你系统掌握一款强大的开源表单解决方案，从环境搭建到性能优化，从基础使用到架构解析，助你轻松应对各类表单需求，成为表单开发专家。

一、环境准备与快速上手

解决表单开发环境配置难题

表单开发的第一步往往是环境配置，不同框架、不同UI库的组合常常让开发者无所适从。这款开源表单解决方案提供了灵活的安装方式，支持多种前端框架和UI组件库，让你轻松搭建开发环境。

基础安装命令

核心库安装

npm install --save @formily/core

React框架适配

npm install --save @formily/react

Vue框架适配

npm install --save @formily/vue

UI组件库集成

# Ant Design集成
npm install --save antd moment @formily/antd

# Element UI集成
npm install --save element-ui @formily/element

💡 技巧提示：建议使用npm 7+或yarn安装，以确保依赖树正确解析。如果需要在多个项目中使用，可以考虑全局安装核心工具。

实现第一个表单应用

让我们通过一个简单的登录表单示例，快速了解这款表单解决方案的基本用法。

React版本示例

import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { FormItem, Input, Password, FormButtonGroup, Submit } from '@formily/antd'

// 创建表单实例
const form = createForm({
  initialValues: {
    username: '',
    password: ''
  },
  validateMessages: {
    required: '${title}不能为空'
  }
})

// 登录表单组件
const LoginForm = () => {
  const handleSubmit = (values) => {
    console.log('表单提交数据:', values)
    // 这里可以添加登录逻辑
  }

  return (
    <FormProvider form={form}>
      <Field
        name="username"
        title="用户名"
        required
        decorator={[FormItem]}
        component={[Input, { placeholder: '请输入用户名' }]}
      />
      <Field
        name="password"
        title="密码"
        required
        decorator={[FormItem]}
        component={[Password, { placeholder: '请输入密码' }]}
      />
      <FormButtonGroup>
        <Submit onSubmit={handleSubmit}>登录</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

export default LoginForm

适用场景：简单登录/注册表单，需要基础的必填项校验和表单提交功能

Vue版本示例

<template>
  <FormProvider :form="form">
    <Field
      name="username"
      title="用户名"
      required
      :decorator="[FormItem]"
      :component="[Input, { placeholder: '请输入用户名' }]"
    />
    <Field
      name="password"
      title="密码"
      required
      :decorator="[FormItem]"
      :component="[Password, { placeholder: '请输入密码' }]"
    />
    <FormButtonGroup>
      <Submit @submit="handleSubmit">登录</Submit>
    </FormButtonGroup>
  </FormProvider>
</template>

<script>
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/vue'
import { FormItem, Input, Password, FormButtonGroup, Submit } from '@formily/element'

export default {
  components: {
    FormProvider,
    Field,
    FormItem,
    Input,
    Password,
    FormButtonGroup,
    Submit
  },
  data() {
    return {
      form: createForm({
        initialValues: {
          username: '',
          password: ''
        },
        validateMessages: {
          required: '${title}不能为空'
        }
      })
    }
  },
  methods: {
    handleSubmit(values) {
      console.log('表单提交数据:', values)
      // 这里可以添加登录逻辑
    }
  }
}
</script>

适用场景：Vue项目中的基础表单，需要与Element UI组件库配合使用

⚠️ 注意事项：不同框架的表单实现略有差异，但核心API保持一致。React版本使用JSX语法，而Vue版本使用模板语法，开发者可以根据自己的技术栈选择合适的实现方式。

二、核心概念解析

理解表单数据流向

表单开发的核心在于理解数据如何在表单中流动。这款表单解决方案采用MVVM架构，将表单分为数据层、逻辑层和视图层，清晰的架构设计让表单开发更加可控。

核心概念对比

概念 作用 核心API
Form 表单实例，管理整个表单状态 createForm, form.submit()
Field 表单字段，管理单个字段状态 Field组件, form.query()
Schema 表单描述，定义表单结构 SchemaField, SchemaMarkup
Reactions 响应式联动，处理字段间依赖 field.reactions(), useField()

表单数据流向采用单向数据流模式：

  1. 用户交互触发视图层变化
  2. 视图层将变化传递给逻辑层
  3. 逻辑层更新数据层状态
  4. 数据层变化通过响应式系统反馈到视图层

掌握响应式表单设计

响应式设计是现代表单的核心需求，能够根据用户输入动态调整表单行为。这款解决方案提供了强大的响应式能力，让表单能够智能响应用户操作。

基础响应式示例

<Field
  name="userType"
  title="用户类型"
  decorator={[FormItem]}
  component={[Select, {
    options: [
      { label: '个人用户', value: 'personal' },
      { label: '企业用户', value: 'enterprise' }
    ]
  }]}
/>

{/* 企业用户才显示的字段 */}
<Field
  name="company"
  title="公司名称"
  decorator={[FormItem]}
  component={[Input]}
  visible={form.query('userType').value() === 'enterprise'}
/>

适用场景：根据用户选择显示不同字段的表单，如个人/企业注册表单

高级响应式示例

<Field
  name="province"
  title="省份"
  decorator={[FormItem]}
  component={[Select, {
    placeholder: '请选择省份'
  }]}
  reactions={(field) => {
    // 监听省份变化，动态加载城市数据
    field.loadRemoteOptions({
      url: '/api/provinces',
      method: 'GET'
    })
  }}
/>

<Field
  name="city"
  title="城市"
  decorator={[FormItem]}
  component={[Select, {
    placeholder: '请先选择省份'
  }]}
  reactions={(field) => {
    const province = field.query('province').value()
    if (province) {
      // 根据省份加载对应城市
      field.loadRemoteOptions({
        url: `/api/cities?province=${province}`,
        method: 'GET'
      })
    } else {
      // 清空城市选择
      field.setValue(undefined)
      field.setProps({ disabled: true })
    }
  }}
/>

适用场景：需要级联选择的表单，如地址选择、分类选择等

💡 技巧提示：reactions函数可以访问当前字段实例和表单实例，通过field.query()方法可以获取其他字段的值，实现复杂的跨字段联动逻辑。

三、实战场景解决方案

实现分步表单流程

复杂表单往往包含大量字段，一次性展示会让用户感到压力。分步表单将表单拆分为多个步骤，引导用户逐步完成，提升用户体验。

分步表单基础实现

import { FormStep } from '@formily/antd'

const StepForm = () => {
  return (
    <FormStep
      onFinish={(values) => {
        console.log('分步表单提交:', values)
      }}
    >
      <FormStep.Step title="基本信息">
        <Field
          name="name"
          title="姓名"
          required
          decorator={[FormItem]}
          component={[Input]}
        />
        <Field
          name="age"
          title="年龄"
          required
          decorator={[FormItem]}
          component={[NumberPicker]}
        />
      </FormStep.Step>
      
      <FormStep.Step title="联系方式">
        <Field
          name="phone"
          title="手机号码"
          required
          decorator={[FormItem]}
          component={[Input]}
          validator={/^1[3-9]\d{9}$/}
        />
        <Field
          name="email"
          title="邮箱"
          required
          decorator={[FormItem]}
          component={[Input]}
          validator={/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/}
        />
      </FormStep.Step>
      
      <FormStep.Step title="确认信息">
        <div>
          <p>姓名: {form.query('name').value()}</p>
          <p>年龄: {form.query('age').value()}</p>
          <p>手机: {form.query('phone').value()}</p>
          <p>邮箱: {form.query('email').value()}</p>
        </div>
      </FormStep.Step>
    </FormStep>
  )
}

适用场景：用户注册、信息采集等包含大量字段的表单

开发动态列表表单

动态列表是表单开发中的常见需求，如添加多条联系人、多组商品信息等。这款解决方案提供了便捷的动态列表实现方式。

动态列表实现

import { ArrayCards } from '@formily/antd'

const DynamicListForm = () => {
  return (
    <Field
      name="contacts"
      title="联系人列表"
      decorator={[FormItem]}
      component={[
        ArrayCards,
        {
          title: "联系人",
          addText: "添加联系人",
          removable: true,
          initialValue: [{ name: '', phone: '' }]
        }
      ]}
    >
      <Field
        name=".name"
        title="姓名"
        required
        decorator={[FormItem]}
        component={[Input]}
      />
      <Field
        name=".phone"
        title="电话"
        required
        decorator={[FormItem]}
        component={[Input]}
        validator={/^1[3-9]\d{9}$/}
      />
    </Field>
  )
}

适用场景：需要动态添加/删除条目的表单，如联系人列表、商品清单等

⚠️ 注意事项：动态列表中的字段名以点开头（如".name"），表示这是数组项的属性。ArrayCards组件提供了添加、删除、排序等功能，可通过props自定义这些行为。

四、高级特性应用

使用JSON Schema构建动态表单

对于需要后端配置或动态生成的表单，JSON Schema是理想的解决方案。它允许你通过JSON定义表单结构，实现前后端表单配置的统一。

基础JSON Schema示例

import { SchemaField } from '@formily/react'

const JsonSchemaForm = () => {
  const schema = {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        title: '姓名',
        required: true,
        'x-decorator': 'FormItem',
        'x-component': 'Input'
      },
      age: {
        type: 'number',
        title: '年龄',
        required: true,
        minimum: 0,
        maximum: 120,
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker'
      },
      gender: {
        type: 'string',
        title: '性别',
        required: true,
        enum: ['male', 'female'],
        enumNames: ['男', '女'],
        'x-decorator': 'FormItem',
        'x-component': 'Radio.Group'
      }
    }
  }

  return (
    <SchemaField schema={schema} />
  )
}

适用场景：需要后端动态配置的表单，如问卷系统、动态表单配置平台

高级JSON Schema示例

const dynamicSchema = {
  type: 'object',
  properties: {
    userType: {
      type: 'string',
      title: '用户类型',
      required: true,
      enum: ['personal', 'enterprise'],
      enumNames: ['个人用户', '企业用户'],
      'x-decorator': 'FormItem',
      'x-component': 'Select'
    },
    // 条件显示的字段
    company: {
      type: 'string',
      title: '公司名称',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-visible': '{{ $form.values.userType === "enterprise" }}'
    },
    // 动态验证规则
    idCard: {
      type: 'string',
      title: '证件号码',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
      'x-validator': [
        '{{ $form.values.userType === "personal" ? /(^\d{18}$)|(^\d{17}(\d|X|x)$)/ : /^[A-Z0-9]{10,18}$/ }}',
        '{{ $form.values.userType === "personal" ? "请输入有效的身份证号码" : "请输入有效的企业代码" }}'
      ]
    }
  }
}

适用场景：需要根据用户选择动态变化的复杂表单，如多类型用户注册

💡 技巧提示：JSON Schema中的"x-"前缀属性是表单解决方案的扩展，用于定义UI行为和验证规则。通过表达式语法"{{ }}"可以实现动态逻辑，访问表单上下文数据。

实现复杂表单校验

表单校验是确保数据有效性的关键环节。这款解决方案提供了灵活的校验机制，支持多种校验方式和错误提示。

多类型校验示例

<Field
  name="password"
  title="密码"
  required
  decorator={[FormItem]}
  component={[Password]}
  validator={[
    {
      validator: (value) => value.length >= 8,
      message: '密码长度不能少于8位'
    },
    {
      validator: /[A-Z]/,
      message: '密码必须包含大写字母'
    },
    {
      validator: /[0-9]/,
      message: '密码必须包含数字'
    }
  ]}
/>

<Field
  name="confirmPassword"
  title="确认密码"
  required
  decorator={[FormItem]}
  component={[Password]}
  validator={[
    {
      validator: (value, form) => value === form.values.password,
      message: '两次输入的密码不一致'
    }
  ]}
/>

适用场景：需要复杂密码策略和密码确认的表单，如用户注册、密码修改

五、性能优化策略

优化大型表单渲染性能

随着表单复杂度增加，性能问题逐渐凸显。特别是在包含数百个字段的大型表单中，优化渲染性能至关重要。

性能优化技巧

  1. 使用虚拟滚动
import { VirtualList } from '@formily/antd'

const LargeForm = () => {
  return (
    <VirtualList
      height={500}
      itemHeight={80}
      dataSource={Array.from({ length: 100 }).map((_, i) => ({ id: i }))}
    >
      {({ id }) => (
        <Field
          key={id}
          name={`field_${id}`}
          title={`字段 ${id + 1}`}
          decorator={[FormItem]}
          component={[Input]}
        />
      )}
    </VirtualList>
  )
}

适用场景：包含大量重复字段的表单，如批量数据录入界面

  1. 延迟加载非关键字段
<Field
  name="advancedSettings"
  title="高级设置"
  decorator={[FormItem]}
  component={[Collapse]}
>
  <Collapse.Panel key="panel1" header="高级选项">
    {/* 高级选项内容，初始不渲染 */}
    <Field name="option1" title="选项1" component={[Input]} />
    <Field name="option2" title="选项2" component={[Input]} />
  </Collapse.Panel>
</Field>

适用场景：包含可选高级配置的表单，将不常用字段放入折叠面板

  1. 减少不必要的重渲染
// 使用memo包装纯展示组件
const FormSummary = React.memo(({ values }) => {
  return (
    <div className="form-summary">
      <h3>表单摘要</h3>
      <pre>{JSON.stringify(values, null, 2)}</pre>
    </div>
  )
})

// 在表单中使用
<FormSummary values={form.values} />

适用场景：所有包含表单数据展示的组件，减少因表单值变化导致的不必要重渲染

⚠️ 注意事项：性能优化需要根据实际场景选择合适的策略。过度优化可能会增加代码复杂度，建议先通过性能分析工具定位瓶颈，再针对性优化。

六、架构解析与定制开发

理解表单解决方案架构

这款开源表单解决方案采用Monorepo架构，将不同功能模块拆分为独立包，便于维护和扩展。核心架构包含以下几个部分：

  • 核心层：@formily/core提供表单核心逻辑，包括数据管理、校验、联动等
  • 响应式层：@formily/reactive提供响应式系统，实现数据驱动视图
  • 框架适配层：@formily/react、@formily/vue等适配不同前端框架
  • UI组件层：@formily/antd、@formily/element等集成UI组件库
  • 工具链：提供Chrome开发者工具扩展等开发辅助工具

开发自定义表单组件

虽然解决方案提供了丰富的内置组件，但实际项目中往往需要开发自定义组件以满足特定需求。

自定义组件开发示例

import { connect, mapProps, mapReadPretty } from '@formily/react'
import { Input as AntdInput } from 'antd'
import { InputProps } from 'antd/es/input'

// 定义组件Props类型
interface MyInputProps extends InputProps {
  prefixText?: string
}

// 实现自定义输入组件
const MyInput = ({ prefixText, ...props }: MyInputProps) => {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {prefixText && <span style={{ marginRight: 8 }}>{prefixText}:</span>}
      <AntdInput {...props} />
    </div>
  )
}

// 连接到Formily生态
export const FormilyInput = connect(
  MyInput,
  mapProps((props, field) => ({
    ...props,
    value: field.value,
    onChange: (value) => field.onChange(value),
    disabled: props.disabled || field.disabled,
    placeholder: props.placeholder || field.title
  })),
  mapReadPretty((props) => {
    return <span>{props.prefixText}: {props.value}</span>
  })
)

// 使用自定义组件
<Field
  name="customField"
  title="自定义字段"
  component={[FormilyInput, { prefixText: '自定义前缀' }]}
/>

适用场景：需要定制UI或功能的特殊表单字段，如带前缀/后缀的输入框、自定义选择器等

💡 技巧提示：connect函数是连接自定义组件与Formily的桥梁，通过mapProps可以将表单字段状态映射到组件props，mapReadPretty则用于定义字段只读状态的展示方式。

总结与展望

通过本文的学习，你已经掌握了这款开源表单解决方案的核心概念、使用方法和高级特性。从环境搭建到性能优化，从基础表达到复杂联动，这款解决方案提供了全方位的表单开发支持。

随着前端技术的发展，表单开发将面临更多挑战，如跨端适配、大规模表单性能优化、AI辅助表单生成等。这款开源项目也在不断演进，未来将支持更多场景和功能。

建议继续深入学习以下内容：

  • 表单设计模式与最佳实践
  • 复杂业务场景下的表单架构设计
  • 表单与后端数据交互的最佳实践

希望本文能帮助你在表单开发的道路上更进一步，提高开发效率，打造更好的用户体验！

formily
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
项目地址：https://gitcode.com/gh_mirrors/fo/formily
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
docsdocs
暂无描述
Dockerfile
696
4.5 K
pytorchpytorch
Ascend Extension for PyTorch
Python
561
687
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
956
946
atomcodeatomcode
Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started
Rust
497
92
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
411
334
MindSpeed-LLMMindSpeed-LLM
昇腾LLM分布式训练框架
Python
148
176
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.6 K
937
Oohos_react_native
React Native鸿蒙化仓库
C++
338
387
MindSpeed-MMMindSpeed-MM
华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。
Python
139
221
flutter_flutterflutter_flutter
暂无简介
Dart
942
235