From 86d9a97ccb08bec766ada95d5860deb28588e2b4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 10 Nov 2023 08:51:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=9A=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E5=AD=98=E5=82=A8=EF=BC=8C=E5=8F=82=E6=95=B0=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C-=E8=A1=A8=E5=8D=95=E6=95=B0=E6=8D=AE=E8=B7=91?=
 =?UTF-8?q?=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infra/demo02/DemoStudentContactForm.vue   | 27 ++++++-------------
 src/views/infra/demo02/DemoStudentForm.vue    | 14 +++++-----
 2 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
index 145b4889..0cd9d106 100644
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ b/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>
diff --git a/src/views/infra/demo02/DemoStudentForm.vue b/src/views/infra/demo02/DemoStudentForm.vue
index 884788dc..1bb6d7ea 100644
--- a/src/views/infra/demo02/DemoStudentForm.vue
+++ b/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>