FormMaking介绍FormMaking表单设计器是一款与行业无关的通用表单设计器前端解决方案，表单设计器包含设计器和生成器两个模块，设计器主要负责表单的动态设计，可以通过拖拽的形式设计生成表单页面，生成器则负责对表单页面的渲染和数据的回写。FormMaking新功能自定义字段高级用法FormMaking基础功能可以看之前都介绍。
FormMaking表单设计器是一款与行业无关的通用表单设计器前端解决方案，表单设计器包含设计器（MakingForm）和生成器（GenerateForm）两个模块，设计器主要负责表单的动态设计，可以通过拖拽的形式设计生成表单页面，生成器则负责对表单页面的渲染和数据的回写。
如果你对FormMaking不太了解可能会把FormMaking当成是单纯页面设计器，只为了减少重复的表单，稍微有点经验的前端开发，通过简单的Copy Paste就能很快做出一个固定的表单页面。而FormMaking做的是一整套与表单相关的前端方案，包含了表单的动态设计，表单渲染，数据回写，数据校验，事件支持，css自定义，动作面板等丰富的功能，而这些所有的功能只需要一个import 命令将MakingForm和GenerateForm引入到项目中，你的项目就可以拥有这些功能。
FormMaking新功能 自定义字段高级用法FormMaking基础功能可以看之前都介绍。
本文我们将介绍如何使用 FormMaking 来引入自己的高级组件，并可以通过设计器进行配置，处理事件等操作
封装分页数据表格组件
我们将封装 一个分页数据表格组件，组件采用 ElementPlus TableV2
<template><div><div ><el-auto-resizer><template #default="{ height, width }"><el-table-v2:columns="columns":data="data"::fixed/></template></el-auto-resizer></div><el-paginationbackgroundlayout="prev, pager, next":total="1000"v-model:current-page="currentPage"@current-change="loadPageData"/></div></template><script setup>import { onMounted, ref, watch } from 'vue'const props = defineProps({modelValue:{type: Array,default: () => []},columns: {type: Array,default: () => []}})const emit = defineEmits(['on-load'])const data = ref(props.modelValue)const currentPage = ref(1)const loadPageData = (index) => {// 通过 emit，可以将事件抛出到设计器中进行配置emit('on-load', index)}onMounted(() => {emit('on-load', currentPage.value)})watch(() => props.modelValue, (val) => {data.value = val})</script>
引入到设计器
注册组件
首先应该在自己项目中进行组件的注册。
import CustomPaginationTable from 'PaginationTable.vue'app.use(FormMakingV3, {components: [{name: 'custom-pagination-table',component: CustomPaginationTable // 自定义组件}]})
也可以使用Vue.component 进行组件的注册
app.component('custom-pagination-table', CustomPaginationTable)
设计器配置
<template><fm-making-form:custom-fields="customFields"></fm-making-form></template><script>export default {data() {return {customFields: [{name: '分页数据列表',el: 'custom-pagination-table',options: {defaultValue: [],labelWidth: 0,isLabelWidth: false,hidden: false,dataBind: true,validator: '',extendProps: {columns: [] // 用于配置表格的列}},events: {onLoad: '' // 定义设计器可以配置的事件，处理组件 emit 的事件}}]}}}</script>
然后在自定义字段中就展示出来了
设计器界面
配置组件表格
表格列配置
在字段属性中对扩展属性配置 进行设置
数据加载
数据加载的 on-load事件，我们在自定义组件中通过emit抛出到设计器中进行配置，在字段属性-动作设置中添加onLoad事件配置如下：
效果展示
我们来查看下最后的效果
效果图
更多关于FormMaking详情可移步：
