主子表：暂时存储，参数校验-表单数据跑通

Author: YunaiV

src/views/infra/demo02/DemoStudentContactForm.vue

@@ -1,12 +1,6 @@
 <template>
-  <el-table
-    :data="formData"
-    @selection-change="handleDemoStudentContactSelectionChange"
-    ref="demoStudentContactRef"
-    :stripe="true"
-    class="-mt-10px"
-  >
-    <el-table-column label="序号" type="index" width="100" />
+  <el-table :data="formData" :stripe="true" class="-mt-10px">
+    <el-table-column label="序号" type="index" width="60" />
     <el-table-column label="名字" prop="name" width="300">
       <template #default="scope">
         <el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
@@ -28,7 +22,9 @@
       </template>
     </el-table-column>
     <el-table-column align="center" fixed="right" label="操作" width="60">
-      <el-button @click="handleAdd" link>—</el-button>
+      <template #default="{ $index }">
+        <el-button @click="handleRemove($index)" link>—</el-button>
+      </template>
     </el-table-column>
   </el-table>
   <el-row justify="center" class="mt-3">
@@ -53,12 +49,6 @@ const formRules = reactive({
   mobile: [required]
 })
 
-const handleDemoStudentContactSelectionChange = (val) => {
-  demoStudentContactList.value = val
-}
-
-const demoStudentContactRef = ref()
-
 /** 新增按钮操作 */
 const emit = defineEmits(['update:formData'])
 const handleAdd = () => {
@@ -71,9 +61,8 @@ const handleAdd = () => {
 }
 
 /** 删除按钮操作 */
-const handleRemove = () => {
-  formData.push({
-    name: '测试'
-  })
+const handleRemove = (index) => {
+  const formData = props.formData.filter((_, i) => i !== index)
+  emit('update:formData', formData)
 }
 </script>

src/views/infra/demo02/DemoStudentForm.vue

@@ -16,14 +16,14 @@
       <el-form-item label="字段 3" prop="field3">
         <el-input v-model="formData.field3" placeholder="请输入字段 3" />
       </el-form-item>
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="联系人信息" name="first">
-          <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
-        </el-tab-pane>
-        <el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
-        <el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
-      </el-tabs>
     </el-form>
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="联系人信息" name="first">
+        <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
+      </el-tab-pane>
+      <el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
+      <el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
+    </el-tabs>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>