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

Author: YunaiV

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: '测试'
   })
 }

src/views/infra/demo02/DemoStudentForm.vue

@@ -7,16 +7,21 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="表描述" prop="tableComment">
-        <el-input v-model="formData.tableComment" placeholder="请输入" />
+      <el-form-item label="字段 1" prop="field1">
+        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+      </el-form-item>
+      <el-form-item label="字段 2" prop="field2">
+        <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+      </el-form-item>
+      <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="User" name="first">
-          <DemoStudentContactForm />
+        <el-tab-pane label="联系人信息" name="first">
+          <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
         </el-tab-pane>
-        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
-        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
-        <el-tab-pane label="Task" name="fourth">Task</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>
     <template #footer>
@@ -38,7 +43,12 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  demoStudentContactList: []
+  demoStudentContactList: [
+    {
+      name: '芋艿',
+      mobile: '15601691300'
+    }
+  ]
 })
 const formRules = reactive({})
 const formRef = ref() // 表单 Ref