五、表单渲染与数据交互
5.1 生成器组件（GenerateForm）使用
<template>
<fm-generate-form
ref="generateForm"
:data="formJson"
:remote="remoteFuncs"
:value="formData"
/>
</template>
<script>
export default {
data() {
return {
formJson: {}, // 表单 JSON 配置
formData: {}, // 表单数据
remoteFuncs: { // 远程方法注册
// 注册远程数据获取方法
getUserList: (resolve) => {
fetch('/api/users').then(res => res.json()).then(data => {
resolve(data)
})
}
}
}
},
methods: {
// 获取表单数据
getFormData() {
return this.$refs.generateForm.getData()
},
// 重置表单
resetForm() {
this.$refs.generateForm.reset()
},
// 验证表单
validateForm() {
this.$refs.generateForm.validate().then(valid => {
if (valid) {
console.log('验证通过')
}
})
}
}
}
</script>
5.2 表单数据存储方案
在企业级应用中，动态表单的数据存储是一个关键问题。FormMaking 生成的 JSON 配置需要与业务数据结合，形成完整的表单解决方案。以下是几种常见的数据存储方案：
方案一：JSON 字段存储
在业务表中增加一个 JSON 类型字段（如 extension_data），将表单配置和表单数据以 JSON 格式存储。这种方案灵活性强，适用于字段不固定的动态表单场景。后端实体需增加对应字段，如 ExtensionData（扩展 JSON 数据）。
方案二：元数据 + 数据表分离
元数据表：存储表单的 JSON 配置，包括字段结构、布局信息等
数据表：存储用户提交的表单数据，与元数据表通过 form_id 关联
这种方案适合需要频繁查询和分析表单数据的场景。
六、二次开发与高级定制
6.1 获取源码与本地开发
# 克隆项目
git clone https://github.com/GavinZhuLei/vue-form-making.git
# 安装依赖
npm install
# 运行开发服务器
npm run serve
# 打包设计器（打包后会生成 dist/ 目录）
npm run build-bundle
开发时需要注意：运行启动的项目是引用设计器的官方示例代码，设计器源码位于 src/components 目录下。
6.2 扩展表单属性
FormMaking 支持通过修改源码扩展表单级别的配置属性：
步骤 1：在 src/components/Container.vue 中添加表单配置属性
data() {
return {
widgetForm: {
list: [],
config: {
labelWidth: 100,
labelPosition: 'top',
size: 'small',
// 在此处扩展表单的配置信息
customProperty: 'custom value'
}
}
}
}
步骤 2：在 src/components/FormConfig.vue 中添加对表单新属性的配置界面
步骤 3：在 src/components/GenerateForm.vue 中添加新属性的渲染逻辑
6.3 扩展自定义组件
FormMaking 支持开发者引入自定义组件，满足特定业务需求。
步骤 1：在 src/components/componentsConfig.js 中添加组件配置信息
{
type: 'custom-component', // 组件类型，保持唯一
name: '自定义组件', // 组件展示名称
icon: 'icon-custom', // 组件图标
options: {
defaultValue: '', // 默认值
customProp: '' // 自定义属性
}
}
步骤 2：在 src/components/WidgetFormItem.vue 和 src/components/GenerateFormItem.vue 中引入并注册自定义组件
import CustomComponent from 'your-component-path'
export default {
components: {
CustomComponent
}
}
步骤 3：在 src/components/WidgetConfig.vue 中添加自定义组件的属性配置界面
6.4 自定义图标
项目使用的是阿里字体图标库（iconfont）。如需自定义图标，请将图标加入到自己的项目中，选择 Font class，将代码下载到本地替换 src/iconfont 文件夹下的文件。
七、性能优化
7.1 典型性能问题
在使用 FormMaking 构建复杂表单应用时，当页面需要同时渲染多个表单或表格时，可能会遇到性能问题。其根本原因在于 DOM 节点的过度渲染和内存管理机制：
每个表格组件都会创建大量 DOM 节点
Vue 需要维护大量虚拟 DOM 节点，增加 diff 算法的计算负担
表格组件可能没有正确释放内存，导致内存持续增长
7.2 优化解决方案
方案一：组件懒加载
实现表格的按需渲染，只有当表格进入可视区域时才进行渲染：
import { defineAsyncComponent } from 'vue'
export default {
components: {
LazyTable: defineAsyncComponent(() => import('./LazyTable.vue'))
},
methods: {
isVisible(index) {
// 实现可视区域检测逻辑
}
}
}
方案二：分页与虚拟滚动
对于大型表格数据，必须实现分页或虚拟滚动技术，只渲染当前可视区域内的数据，避免一次性渲染所有 DOM 节点。
方案三：数据优化
使用 Object.freeze 冻结不需要响应式的数据，可以减少 Vue 的响应式系统开销：
// 冻结大数据集，阻止 Vue 将其转换为响应式对象
this.tableData = Object.freeze(largeDataSet)
方案四：组件销毁清理
确保不使用的表格组件能够被正确销毁，释放内存资源：
import { onBeforeUnmount } from 'vue'
export default {
setup() {
onBeforeUnmount(() => {
// 清除定时器、取消网络请求、移除事件监听
})
}
}
