基本完成动态组件的学习

src/App.vue

@@ -3,6 +3,7 @@
     <router-link :to="{name:'form1'}">Form Demo 1: 基本使用</router-link><br>
     <router-link :to="{name:'form2'}">Form Demo 2: 行内表单</router-link><br>
     <router-link :to="{name:'form3'}">Form Demo 3: 表单验证</router-link><br>
+    <router-link :to="{name:'form4'}">Form Demo 4: 动态表单</router-link><br>
   </div>
   <hr>
   <div>

src/router/index.js

@@ -5,6 +5,7 @@ import {createRouter, createWebHistory} from 'vue-router'
 const formDemo1 = () => import('../views/Form_Demo1.vue')
 const formDemo2 = () => import('../views/Form_Demo2.vue')
 const formDemo3 = () => import('../views/Form_Demo3.vue')
+const formDemo4 = () => import('../views/Form_Demo4.vue')
 
 
 // 引入组件
@@ -27,6 +28,11 @@ const routes = [
         name: 'form3',
         component: formDemo3
     },
+    {
+        path: '/form4',
+        name: 'form4',
+        component: formDemo4
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/Form_Demo4.vue

@@ -7,13 +7,13 @@
     <el-form-item required class="domain-items">
       <template #label>
         <label>域名</label>
-        <el-button class="m1-10" @click="addDomain">新增域名</el-button>
+        <el-button class="ml-10" @click="addDomain">新增域名</el-button>
       </template>
       <el-form-item
           v-for="(domain, index) in dynamicValidateForm.domains"
           :label="'域名'+ index"
           :key="domain.key"
-          :prop="'domain.'+index+'.value'"
+          :prop="'domains.'+index+'.value'"
           class="domain-item"
           :rules="{
             required: true,
@@ -22,10 +22,13 @@
           }"
       >
         <el-input v-model="domain.value" class="domain-item-input"></el-input>
-        <el-button class="m1-10" @click.prevent="removeDomain(domain)">删除</el-button>
+        <el-button class="ml-10" @click.prevent="removeDomain(domain)">删除</el-button>
       </el-form-item>
     </el-form-item>
-
+    <el-form-item>
+      <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+      <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+    </el-form-item>
   </el-form>
 </template>
 
@@ -39,7 +42,40 @@ export default {
         domains: [
           {value: ""}
         ]
+      },
+      rules: {
+        email:[
+          {required: true, message:'请填写邮箱地址！', trigger:'blur'},
+          {type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change']}
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("提交成功！")
+        } else {
+          console.log('提交失败')
+          return false
+        }
+      })
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        name: "",
+        key: Date.now(),
+      })
+    },
+    removeDomain(item) {
+      let index = this.dynamicValidateForm.domains.indexOf(item);
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1);
       }
+    },
+    resetForm(formName) {
+      this.refs[formName].resetFields();
     }
   }
 }
@@ -47,5 +83,19 @@ export default {
 
 
 <style scoped>
-
+.domain-items {
+  border: 1px solid #eee;
+  padding: 10px;
+}
+.domain-item {
+  margin-bottom: 15px!important;
+  display: inline-block;
+}
+.ml-10 {
+  margin-left: 10px;
+}
+.domain-item-input {
+  display: inline-block;
+  width: 80%;
+}
 </style>