临时代码

src/views/Form_Demo4.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-form :model="dynamicValidateForm" :rules="rules" ref="dynamicValidateForm" class="demo-dynamic"
+           label-position="top">
+    <el-form-item prop="email" label="邮箱">
+      <el-input type="text" v-model="dynamicValidateForm.email"></el-input>
+    </el-form-item>
+    <el-form-item required class="domain-items">
+      <template #label>
+        <label>域名</label>
+        <el-button class="m1-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'"
+          class="domain-item"
+          :rules="{
+            required: true,
+            message: '域名不能为空',
+            trigger: 'blur'
+          }"
+      >
+        <el-input v-model="domain.value" class="domain-item-input"></el-input>
+        <el-button class="m1-10" @click.prevent="removeDomain(domain)">删除</el-button>
+      </el-form-item>
+    </el-form-item>
+
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "Form_Demo4",
+  data() {
+    return {
+      dynamicValidateForm: {
+        email: "",
+        domains: [
+          {value: ""}
+        ]
+      }
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+
+</style>