在企业级应用开发中，表单是信息采集和交互的核心组件。传统的表单开发模式需要开发者手动编写大量的 HTML 代码、处理表单验证、管理数据绑定，这不仅耗时耗力，而且当业务需求变更时需要频繁修改代码。这种“硬编码”模式在应对快速变化的业务需求时显得力不从心。

FormMaking 正是为了解决这一痛点而诞生的。它是一款基于 Vue.js 的可视化表单设计器，通过简单的拖拽操作，让开发者能够快速创建复杂的表单页面，并将表单配置导出为 JSON 格式，通过配套的表单渲染组件动态渲染。这种“设计即代码”的理念，让 FormMaking 在 OA 系统、考试系统、报表系统、流程管理等众多项目中得到了广泛应用。

本文将从 FormMaking 的核心理念入手，系统全面地介绍其架构设计、核心组件、字段配置、二次开发、性能优化等多个维度的知识点，帮助读者从零开始掌握这一强大的表单设计器。

一、FormMaking 概述

1.1 什么是 FormMaking
FormMaking 是一款基于 Vue 的可视化表单设计器，赋能企业实现低代码开发模式。它帮助开发者从传统枯燥的表单代码中解放出来，让开发者能够更多关注业务逻辑，快速提高开发效率，节省研发成本。

FormMaking 自 2018 年开源以来，经过五年的迭代升级和优化，功能丰富且稳定，具有极强的可扩展性，特别适用于企业级开发。目前已在 OA 系统、考试系统、报表系统、流程管理等众多项目中得到了广泛使用。

FormMaking 的核心架构由两大部分组成：

这种“设计器 + 生成器”的分离架构，使得表单的设计和渲染可以独立部署。设计完成后导出的 JSON 配置可以存储到数据库中，在任意需要的地方通过生成器动态渲染，实现了表单的“一次设计，多处使用”。
1.2 发展历程与版本演进
FormMaking 的发展经历了多个重要版本：

2018 年：项目在 GitHub 上开源，迅速获得开发者关注

2019-2020 年：持续迭代，优化核心功能，完善文档

2021 年：1.2.20 版本迎来重要更新，新增多终端适配和表格布局优化

2024 年：高级版本（Pro）功能持续丰富，提供更专业的商业支持

FormMaking 目前分为两个版本：


官方团队目前着重迭代高级版本，基础版本持续修复 bug，不再开发新功能。

1.3 核心技术栈
FormMaking 采用现代化的前端技术栈构建：

FormMaking 支持 Vue 2 和 Vue 3 两个主要版本，开发者可以根据项目需求选择合适的版本。

1.4 核心特性
FormMaking 拥有以下核心特性，使其在众多表单设计器中脱颖而出：

二、开发环境搭建与快速入门

2.1 安装方式
FormMaking 支持多种安装方式，适应不同的项目环境。

方式一：npm 安装（推荐工程化项目）

# 安装依赖包
npm install form-making -S

方式二：CDN 引入（快速原型）

<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 FormMaking 样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">

<!-- 引入 Vue 和 Element UI -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 FormMaking -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
<!-- 如需代码预览，还需引入 Ace 编辑器 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

2.2 快速上手
完整导入示例：

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.use(ElementUI)
Vue.use(FormMaking)  // 全局注册 FormMaking 组件

new Vue({
  render: h => h(App)
}).$mount('#app')

在组件中使用设计器：

<template>
  <div class="form-design-container">
    <fm-making-form 
      ref="makingform"
      style="height: 700px;"
      preview 
      generate-code 
      generate-json
    >
      <!-- 可选：自定义操作按钮插槽 -->
      <template slot="action">
        <el-button type="primary" @click="handleSave">保存表单</el-button>
      </template>
    </fm-making-form>
  </div>
</template>

<script>
export default {
  methods: {
    handleSave() {
      // 获取设计器生成的 JSON 配置
      const json = this.$refs.makingform.getJSON()
      // 可将 JSON 保存到后端
      console.log('表单配置:', json)
    }
  }
}
</script>

使用生成器渲染表单：

<template>
  <div class="form-render-container">
    <fm-generate-form 
      ref="generateForm"
      :data="formJson" 
      :remote="remoteFuncs"
      :value="formData"
    />
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 从后端获取或从设计器导出的 JSON 配置
      formJson: {},
      // 表单数据
      formData: {},
      // 远程数据源方法
      remoteFuncs: {
        // 定义异步获取下拉选项的方法
        getOptions: (resolve) => {
          // 调用 API 获取数据后，通过 resolve 返回
          fetch('/api/options').then(res => res.json()).then(data => {
            resolve(data)
          })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      // 获取表单数据
      const data = this.$refs.generateForm.getData()
      console.log('表单数据:', data)
      // 提交到后端...
    }
  }
}
</script>

2.3 设计器组件（MakingForm）API
设计器组件提供了丰富的属性和方法，满足各种定制需求：

主要方法：

来源：
http://oieaw.cn