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

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

源码地址: Github | Gitee

<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 方法验证所有表单数据，并在验证成功后输出表单数据。

注意事项

• Mock 数据: 在实际开发中，应将 mockData 替换为真实的 API 请求。
• 唯一标识: 使用 idCounter 确保每个表单具有唯一的 id，避免使用索引作为 key。
• 表单验证: 在 handleSubmit 方法中，使用 Promise.all 确保所有表单都通过验证。