开源|FormCreate低代码表单在弹窗中渲染表单时表单的值没有正常清空解决方法

news2024/12/22 22:02:30

如何在弹窗中通过低代码表单 FormCreate 渲染表单，包括表单的配置、表单验证、以及表单提交的处理。

源码地址: Github | Gitee

低代码表单FormCrate

<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>