主子表：暂时存储，样式跑通

src/views/infra/demo02/DemoStudentContactForm.vue

@@ -1,22 +1,15 @@
 <template>
-  <!--  <el-row :gutter="10" class="mb2">-->
-  <!--    <el-col :span="1.5">-->
-  <!--      <el-button type="primary" @click="handleAdd">添加</el-button>-->
-  <!--    </el-col>-->
-  <!--    <el-col :span="1.5">-->
-  <!--      <el-button type="danger">删除</el-button>-->
-  <!--    </el-col>-->
-  <!--  </el-row>-->
   <el-table
     :data="formData"
     @selection-change="handleDemoStudentContactSelectionChange"
     ref="demoStudentContactRef"
     :stripe="true"
+    class="-mt-10px"
   >
     <el-table-column label="序号" type="index" width="100" />
     <el-table-column label="名字" prop="name" width="300">
       <template #default="scope">
-        <el-form-item label-width="0px" :inline-message="true">
+        <el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
           <el-input v-model="scope.row.name" placeholder="请输入名字" />
         </el-form-item>
       </template>
@@ -25,26 +18,37 @@
       <template #default="{ row, $index }">
         <el-form-item
           label-width="0px"
-          :prop="`formData.${$index}.mobile`"
+          :prop="`demoStudentContactList.${$index}.mobile`"
           :rules="formRules.mobile"
           :inline-message="true"
+          class="mb-0px!"
         >
           <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
         </el-form-item>
       </template>
     </el-table-column>
+    <el-table-column align="center" fixed="right" label="操作" width="60">
+      <el-button @click="handleAdd" link>—</el-button>
+    </el-table-column>
   </el-table>
-  <el-button @click="handleAdd" class="w-1/1">+ 添加客户信息</el-button>
+  <el-row justify="center" class="mt-3">
+    <el-button @click="handleAdd" round>+ 添加联系人</el-button>
+  </el-row>
 </template>
 <script setup lang="ts">
-const formData = ref([
-  {
-    name: '芋艿'
-  },
-  {
-    name: '土豆'
-  }
-])
+const props = defineProps<{
+  formData: any[]
+}>()
+// const formData = ref([
+//   {
+//     name: '芋艿',
+//     mobile: '15601691300'
+//   },
+//   {
+//     name: '土豆',
+//     mobile: '15601691234'
+//   }
+// ])
 const formRules = reactive({
   mobile: [required]
 })
@@ -56,15 +60,19 @@ const handleDemoStudentContactSelectionChange = (val) => {
 const demoStudentContactRef = ref()
 
 /** 新增按钮操作 */
+const emit = defineEmits(['update:formData'])
 const handleAdd = () => {
-  formData.value.push({
-    name: '测试'
-  })
+  emit('update:formData', [
+    ...props.formData,
+    {
+      name: '土豆'
+    }
+  ])
 }
 
 /** 删除按钮操作 */
 const handleRemove = () => {
-  formData.value.push({
+  formData.push({
     name: '测试'
   })
 }