在子页面（弹窗）的表单中填写完信息点击提交按钮后，如何将表单中的内容传递给父页面中的table

Question

在子页面（弹窗）的表单中填写完信息点击提交按钮后，如何将表单中的内容传递给父页面中的table

具体代码如下

父页面

<template>
    <div class="card-fill layout-padding">
            <el-form ref="formRe" :model="state.vmModel" label-width="100px">
                <el-row>
                    <el-col :xs="24" :lg="24" class="mb20">
                        <el-form-item ref="Entity_CaseDescription_FormItem" prop="Entity.CaseDescription" label="事件">
                            <el-input type="textarea" rows=5 v-model="state.vmModel.Entity.CaseDescription"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-card class="mb20 pcard" shadow="hover">
                    <template #header>
                        <div class="cardheader">
                            <div class="headertitle">
                                <span>人员</span>
                            </div>
                            <div>
                                <el-button type="primary" text  @click="AddPartInfos">添加</el-button>
                            </div>
                        </div>
                    </template>
                    <el-table v-model="state.vmModel.Entity.PartyInfos" style="width: 100%">
                        <el-table-column prop="Name" label="名称" width="180" />
                        <el-table-column prop="Address" label="地址" />
                    </el-table>
                </el-card>
            </el-form>
    </div>
</template>
<script setup lang="ts" name="新增;false">
import { ElMessageBox, ElMessage } from 'element-plus';
import { defineAsyncComponent, reactive, ref, getCurrentInstance, onMounted, nextTick } from 'vue';

const ci = getCurrentInstance() as any;
const PartyInfoDialog = defineAsyncComponent(() => import('./components/addpartinfo.vue'));

// 定义变量内容
const formRef = ref();
const state = reactive({
    vmModel: {
        Entity: {
            CaseDescription: null,
            PartyInfos: [] as any[],
        },
    },
});
// 添加人员
const AddPartInfos = () => {
    other.openDialog('添加当事人', PartyInfoDialog, null, null);
}
// 页面加载时
onMounted(() => {
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh', 'closeDialog']);
// 关闭弹窗
const closeDialog = () => {
    emit('closeDialog');
};
</script>

子页面(点击el-button时弹出的页面)

<template>
    <div class="card-fill layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-form ref="formRefInfo" :model="statePartyInfo.vmModel" label-width="100px">
                <el-row>
                    <el-col :xs="24" :lg="12" class="mb20">
                        <el-form-item ref="Entity_Name_FormItem" prop="Entity.Name" label="姓名)">
                            <el-input v-model="stateInfo.vmModel.Entity.Name" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :lg="12" class="mb20">
                        <el-form-item ref="Entity_Address_FormItem" prop="Entity.Address" label="居住地">
                            <el-input v-model="stateInfo.vmModel.Entity.Address" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="text-align:right;">
                    <WtmButton @click="onSubmitPartyInfo" type="primary" button-text="提交" style="margin-top:15px;" />
                    <WtmButton @click="onClosePartyInfo" type="primary" button-text="取消" style="margin-top:15px;" />
                </div>
            </el-form>
        </el-card>
    </div>
</template>


<script setup lang="ts" name="添加人员;false">
import { ElMessageBox, ElMessage } from 'element-plus';
import { defineAsyncComponent, reactive, ref, getCurrentInstance, onMounted, nextTick } from 'vue';
const ci = getCurrentInstance() as any;


// 定义变量内容
const formRefInfo = ref();
const stateInfo = reactive({
    vmModel: {
        Entity: {
            Name: null,
            Address: null,
        },
    },
});

// 取消
const onClosePartyInfo = () => {
    closeDialog();
};

// 提交
const onSubmitPartyInfo = () => {
};

// 页面加载时
onMounted(() => {

});

</script>

Answer 1

引自免费微信小程序：皆我百晓生

要实现将子页面表单中的数据通过Vue.js传递给父页面表格，我们可以通过以下步骤进行操作：

1. 在父页面，我们创建一个名为addpartinfo.vue的子组件，并为其设置一个模板。

<template>
    <div class="card-fill layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <el-form ref="formRefInfo" :model="statePartyInfo.vmModel" label-width="100px">
                <el-row>
                    <el-col :xs="24" :lg="12" class="mb20">
                        <el-form-item ref="Entity_Name_FormItem" prop="Entity.Name" label="姓名">
                            <el-input v-model="statePartyInfo.vmModel.Entity.Name" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :lg="12" class="mb20">
                        <el-form-item ref="Entity_Address_FormItem" prop="Entity.Address" label="居住地">
                            <el-input v-model="statePartyInfo.vmModel.Entity.Address" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="text-align:right;">
                    <WtmButton @click="onSubmitPartyInfo" type="primary" button-text="提交" style="margin-top:15px;" />
                    <WtmButton @click="onClosePartyInfo" type="primary" button-text="取消" style="margin-top:15px;" />
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="添加人员;false">
import { ElMessageBox, ElMessage } from 'element-plus';
import { defineAsyncComponent, reactive, ref, getCurrentInstance, onMounted, nextTick } from 'vue';

// 创建子组件
const addpartinfo = defineAsyncComponent(() => import('./components/addpartinfo.vue'));

// 设置数据模型
const statePartyInfo = reactive({
    vmModel: {
        Entity: {
            Name: '',
            Address: '',
        },
    },
});

// 监听父页面提交事件
onMounted(() => {
    // 当子组件被挂载时，从子组件获取数据并将其赋值给父页面的数据模型
    const formData = statePartyInfo.vmModel.Entity;

    // 同样，为子组件添加状态属性，用于记录正在处理或完成的操作
    const partyInfoState = reactive({ isProcessing: false });

    // 父页面的提交按钮中绑定函数，用于接收子组件的提交请求
    const onSubmitPartyInfo = async (event) => {
        event.preventDefault();

        try {
            // 处理表单数据并传递给父页面
            await renderPagingTable(formData);

            // 若提交成功，显示反馈信息并关闭表单
            if (formData.isProcessing === false) {
                const result = await getDataFromService('getPartyInfo');

                if (result.data.code === 'success') {
                    notifySuccess(result.data.data.message);
                    closeDialog();
                } else {
                    notifyError(result.data.message);
                }
            }
        } catch (error) {
            notifyError(error.message);
        }

        // 否则，阻止表单提交并将当前操作标记为已处理
        formData.isProcessing = true;
    };

    // 初始化表格数据模型
    renderPagingTable(formData);

    // 弹出对话框，显示添加人员的确认界面
    new ElMessageBox({
        message: '您是否确定要保存所选人员？',
        buttons: [
            { text: '确认', handler: onSubmitPartyInfo },
            { text: '取消', handler: onClosePartyInfo },
        ],
        icon: 'success',
    }).then((result) => {
        if (result.status === 'success') {
            submitFormData();
        }
    });
});

// 将表单数据转换为JSON格式并发送到服务端
async function renderPagingTable(formData) {
    // 遍历所有表单字段
    for (const field of formData.fields) {
        // 根据字段类型的不同，执行不同的渲染逻辑
        switch (field.type.toLowerCase()) {
            case 'textarea':
                // 使用textarea组件填充表单内容
                formData[field.name] = formData[field.name].value;
                break;
            case 'number':
                // 将数字类型转化为可接受的日期字符串格式
                formData[field.name] = formData[field.name].toString().replace('.', '-');
                break;
            default:
                // 处理其他类型的表单字段
                break;
        }
    }

    // 发送请求并处理响应
    try {
        const data = await getDataFromService('updatePartyInfo', formData);
        notifySuccess(data.message);
    } catch (error) {
        notifyError(error.message);
    }
}

// 获取服务端返回的数据
function getDataFromService(url, data) {
    // 这里根据实际业务需求实现异步API调用
    return fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
        .then(response => response.json())
        .catch(error => error.response);
}

在这个例子中，我们首先从子组件中获取表单数据，然后对这些数据进行处理。对于添加人员部分，我们首先从子组件中获取表单信息，包括事件描述、地址等，并将这些信息存储在数据模型中。然后，我们为子组件添加了一个状态属性isProcessing，用于记录正在处理的请求状态。当父页面提交按钮被点击时，我们监听这个属性，一旦发现其状态变为false，我们就向服务端发起一个GET请求来获取新的活动信息。服务端收到请求后，会将结果以JSON格式返回，并更新表单状态为false表示请求已完成。此时，我们在父页面的提交按钮上附带了两个按钮：一个确认按钮，用于完成数据提交；一个取消按钮，用于取消正在进行的请求。点击确认按钮时，我们会调用submitFormData方法，将新的数据和状态传入服务端，并在弹出的反馈窗口中显示结果。点击取消按钮时，我们将isProcessing属性设回true，同时更新表单状态为false，表明当前操作已完成。

注意，这只是一个基本示例，实际应用中可能需要根据具体的业务需求和网络环境进行相应的配置和错误处理。例如，为了处理表单上传失败的情况，我们需要在表单验证环节检查是否有足够的输入数据。为了处理异步请求，我们可能需要使用Promise或async/await语法来处理异步操作，确保在服务端成功处理请求之前不会阻塞子组件的渲染过程。此外，为了提高页面性能，我们可以在服务端处理完成后及时通知子组件，而不是等待子组件的请求处理完成后再调用notifySuccess方法。