如何在弹窗中通过低代码表单 FormCreate 渲染表单,包括表单的配置、表单验证、以及表单提交的处理。
<template>
<div>
<!-- 触发弹窗的按钮 -->
<el-button type="primary" @click="showDialog = true">打开表单弹窗</el-button>
<!-- 弹窗 -->
<el-dialog
title="用户信息"
v-model="showDialog"
width="50%"
@close="handleClose"
>
<form-create
:rule="rules"
:option="formOptions"
v-model:api="fapi"
v-model="formData"
/>
<template #footer>
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button @click="showDialog = false">取消</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ElDialog, ElButton } from 'element-plus';
import formCreate from '@form-create/element-ui';
const temp = [
{
type: 'input',
field: 'username',
title: '用户名',
value: '',
props: { placeholder: '请输入用户名' },
validate: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
},
{
type: 'input',
field: 'email',
title: '邮箱',
value: '',
props: { placeholder: '请输入邮箱' },
validate: [
{ required: true, message: '邮箱不能为空', trigger: 'blur' },
{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
],
},
];
// 表单规则
const rules = ref([]);
// 表单配置
const formOptions = ref({
submitBtn: false, // 隐藏默认提交按钮
resetBtn: false, // 隐藏默认重置按钮
forceCoverValue: true //开启v-model强制同步
});
// 控制弹窗显示的状态
const showDialog = ref(false);
const fapi = ref(null);
const formData = ref({});
watch(showDialog, (n) =>{
if(n) {//打开弹窗时重置表单生成规则和formData
rules.value = formCreate.copyRules(temp);
formData.value = {};
}
})
// 表单提交处理函数
const handleSubmit = () => {
fapi.value.validate().then(res=>{
fapi.value.submit(); //触发表单提交事件, 也可以直接在这里提交数据
console.log('提交数据:', formData.value);
showDialog.value = false; // 关闭弹窗
})
};
// 处理弹窗关闭事件
const handleClose = () => {
showDialog.value = false; // 关闭弹窗
};
</script>
<style>
/* 自定义弹窗样式 */
.el-dialog {
padding: 20px;
}
</style>
说明
-
触发弹窗: 点击“打开表单弹窗”按钮,showDialog 被设置为 true,弹窗将显示。
-
表单规则: rules 用于定义表单字段和验证规则,通过 FormCreate.copyRules 方法生成表单规则副本,并在弹窗打开时应用。
-
表单配置: formOptions 配置表单选项,如隐藏默认的提交和重置按钮,forceCoverValue 确保表单值被覆盖。