当前位置：首页 > news >正文

开源|低代码表单FormCreate通过循环创建多个表单?

news 2025/7/19 23:32:20

本文将展示如何使用低代码表单 form-create 在循环创建多个表单，并实现表单的动态添加、重置和提交功能。我们将使用 Mock 数据模拟从接口获取的表单数据，并提供详细的代码示例和解释。

源码地址: Github | Gitee

formCreate

<template><div><el-button @click="fetchFormData">获取表单数据</el-button><el-button @click="addForm">添加表单</el-button><el-button @click="resetForms">重置表单</el-button><br/><br/><div v-for="form in forms" :key="form.id"><form-create:rule="form.rules":option="formOptions"v-model:api="form.api"v-model="form.data"/><el-divider></el-divider></div><el-button type="primary" @click="handleSubmit">提交表单</el-button></div>
</template><script setup>
import {ref} from 'vue';
import {ElButton, ElDivider} from 'element-plus';
import formCreate from '@form-create/element-ui';// Mock 数据
const mockData = () => [{name: '张三', email: 'zhangsan@example.com'},{name: '李四', email: 'lisi@example.com'},{name: '王五', email: 'wangwu@example.com'},
];let idCounter = 1;const createForm = (defaultData = {}) => ({id: idCounter++,rules: [{type: 'input',field: 'name',title: `表单 ${idCounter - 1} - 姓名`,props: {placeholder: '请输入姓名'},validate: [{required: true, message: '姓名不能为空', trigger: 'blur'}],},{type: 'input',field: 'email',title: `表单 ${idCounter - 1} - 邮箱`,props: {placeholder: '请输入邮箱'},validate: [{required: true, message: '邮箱不能为空', trigger: 'blur'},{type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur'},],},],data: defaultData,api: null,
});const forms = ref([]);const formOptions = ref({submitBtn: false,resetBtn: false,forceCoverValue: true,
});const fetchFormData = async () => {try {// 使用 Mock 数据代替接口请求const formData = mockData(); // 假设 mockData 是从接口返回的数据// 根据 Mock 数据确定表单数量，并附带默认值forms.value = formData.map(data => createForm(data));} catch (error) {console.error('获取表单数据失败:', error);}
};const addForm = () => {forms.value.push(createForm());
};const resetForms = () => {fetchFormData(); // 重新从 Mock 数据获取数据
};// 表单提交处理函数
const handleSubmit = () => {Promise.all(forms.value.map(form => form.api.validate())).then(() => {const formData = [];forms.value.forEach(form => {formData.push(form.data);});alert(JSON.stringify(formData));});
};fetchFormData();
</script><style>
/* 自定义样式 */
</style>

在这里插入图片描述

代码说明

按钮区域: 包含三个按钮用于获取表单数据、添加新表单和重置表单。按钮的 @click 事件绑定到相应的方法。
循环渲染表单: 使用 v-for 指令遍历 forms 数组，渲染每个表单。每个表单通过 form-create 组件生成，key 使用唯一的 form.id。
表单创建: createForm 函数生成具有默认数据的表单配置。idCounter 用于确保每个表单具有唯一的 id。
获取表单数据: fetchFormData 方法使用 mockData 模拟从接口获取数据，初始化表单列表。
添加表单: addForm 方法向表单列表中添加一个新的空表单。
重置表单: resetForms 方法重新从 Mock 数据获取数据，重置表单列表。
提交表单: handleSubmit 方法验证所有表单数据，并在验证成功后输出表单数据。