Mediation-Frontend/src/views/test.vue

<template>
    <div>
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item prop="email" label="邮箱" :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]">
                <el-input v-model="dynamicValidateForm.email"></el-input>
            </el-form-item>
            <div v-for="(item, index) in dynamicValidateForm.domains" :key="item.key">
                <el-form-item :label="'域名' + index" :prop="'domains.' + index + '.value.name'" :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
        }">
                    <el-input v-model="item.value.name"></el-input>
                </el-form-item>
                <el-form-item :label="'链接' + index" :prop="'domains.' + index + '.value.url'" :rules="{
            required: true, message: '链接不能为空', trigger: 'blur'
        }">
                    <el-input v-model="item.value.url"></el-input>
                </el-form-item>
                <el-button @click.prevent="removeDomain(item)">删除</el-button>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                <el-button @click="addDomain">新增域名</el-button>
                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dynamicValidateForm: {
                domains: [{
                    value: {
                        name: "",
                        url: ""
                    }
                }],
                email: ''
            },
            data: { "applicant": { "id": 123, "caseAppliId": 5453163805296176, "userId": null, "applicantDeptId": null, "code": null, "compLegalPerson": null, "roleType": 1, "groupOrder": 2, "operatorFlag": 0, "phone": "17691225077", "email": "1129801211@qq.com", "name": "白贵勇", "home": "西安", "address": "西安", "idCard": "612429198708193335", "idType": null, "nationality": null, "birth": null, "sex": null, "resName": null }, "applicantAgent": null, "res": { "id": 124, "caseAppliId": 5453163805296176, "userId": null, "applicantDeptId": null, "code": null, "compLegalPerson": null, "roleType": 3, "groupOrder": 2, "operatorFlag": 0, "phone": "18792927508", "email": "1322446236@qq.com", "name": "王琼", "home": "西安", "address": "西安", "idCard": "14050219970814622X", "idType": null, "nationality": null, "birth": null, "sex": null, "resName": null }, "resAgent": null }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    console.log(this.dynamicValidateForm);

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1)
            }
        },
        addDomain() {
            this.dynamicValidateForm.domains.push({
                value: {
                    name: "",
                    key: Date.now()
                },
            });
        }
    }
}
</script>