本文将展示如何使用低代码表单 form-create 在循环创建多个表单,并实现表单的动态添加、重置和提交功能。我们将使用 Mock 数据模拟从接口获取的表单数据,并提供详细的代码示例和解释。
<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 确保所有表单都通过验证。