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

该回答引用自GPT-3.5,由博主GISer Liu编写：

根据你的描述，你想在子页面弹窗的表单中填写完信息后，点击提交按钮，将表单中的内容传递给父页面中的表格。为了实现这个功能，你可以通过以下步骤进行操作：

1. 在子页面中，定义一个事件，当提交按钮被点击时触发，将表单中的数据传递给父页面。
2. 在父页面中，监听子页面触发的事件，并更新表格数据。
   下面是具体的实现代码：

   子页面（弹窗）代码：

   vueCopy code

   <template>
   <div class="card-fill layout-padding">
   <el-card shadow="hover" class="layout-padding-auto">
   <el-form ref="formRefInfo" :model="stateInfo.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;">
   <el-button @click="onSubmitPartyInfo" type="primary" button-text="提交" style="margin-top:15px;" />
   <el-button @click="onClosePartyInfo" type="primary" button-text="取消" style="margin-top:15px;" />
   div>
   el-form>
   el-card>
   div>
   template>
   <script setup lang="ts" name="添加人员">
   import { ref } from 'vue';
   const formRefInfo = ref();
   const stateInfo = reactive({
   vmModel: {
   Entity: {
   Name: null,
   Address: null,
   },
   },
   });
   const onClosePartyInfo = () => {
   closeDialog();
   };
   const onSubmitPartyInfo = () => {
   // 触发事件将数据传递给父页面
   emit('submitPartyInfo', stateInfo.vmModel.Entity);
   };
   script>
   

   父页面代码：

   vueCopy code

   <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 :data="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="新增">
   import { ref } from 'vue';
   const formRef = ref();
   const state = reactive({
   vmModel: {
   Entity: {
   CaseDescription: null,
   PartyInfos: [] as any[],
   },
   },
   });
   const AddPartInfos = () => {
   // 打开子页面弹窗
   other.openDialog('添加当事人', PartyInfoDialog, null, null);
   };
   // 监听子页面提交事件，更新父页面数据
   const onPartyInfoSubmitted = (partyInfo) => {
   state.vmModel.Entity.PartyInfos.push(partyInfo);
   };
   // 页面加载时
   onMounted(() => {});
   // 定义子组件向父组件传值/事件
   const emit = defineEmits(['refresh', 'closeDialog', 'submitPartyInfo']);
   // 关闭弹窗
   const closeDialog = () => {
   emit('closeDialog');
   };
   script>
   

   在父页面中，监听子页面提交事件submitPartyInfo，当子页面提交按钮被点击时，会触发该事件，并将表单中的数据传递给父页面，父页面收到数据后更新表格数据，实现了表单内容传递的功能。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订