Click on the el-form form to add the same form content and verify

Requirements: The el-form form has an initial style, and after clicking the Add button, the same style appears, but the content is not affected, and the newly added style will also have form verification

The default form is as shown below

 

 Click to add name and age, and click submit without input, as shown below

 

 

 I pasted all the code directly, you need to copy and paste directly, the amount of code is not large, it is very easy to implement

<template>
    <div class="content-box">
        <div class="container">
            <p>主题页面 1 - 1</p>
            <el-row>
                <el-col :span="9">
                    <div class="table-container">
                        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="年龄" prop="age">
                                <el-input v-model="form.age"></el-input>
                            </el-form-item>
                            <div v-for="(item, index) in form.items" :key="index">
                                <el-form-item
                                    label="性别"
                                    :prop="'items.' + index + '.sex'"
                                    :rules="{ required: true, message: '性别不能为空', trigger: 'blur' }"
                                >
                                    <el-input v-model="item.sex"></el-input>
                                </el-form-item>
                                <el-form-item label="爱好" :prop="'items.' + index + '.hobby'"
                                    :rules="{ required: true, message: '爱好不能为空', trigger: 'blur' }">
                                    <el-input v-model="item.hobby"></el-input>
                                </el-form-item>
                            </div>
                            <el-form-item>
                                <template>
                                    <el-button type="primary" @click="addItem">添加姓名年龄</el-button>
                                    <el-button type="primary" @click="submitForm">提交</el-button>
                                </template>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>

            <div class="pagination-area"></div>
        </div>
    </div>
</template>

<script>


export default {
    data() {
        return {
            form: {
                name: '',
                age: '',
                items: [{ sex: '', hobby: '' }]
            },
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                age: [{ required: true, message: '请输入年龄', trigger: 'blur' }]
            }
        };
    },
    created() {},
    methods: {
        // 添加表单内容操作
        addItem() {
            this.form.items.push({
                name: '',
                sex: ''
            });
        },
        // 提交做校验
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    const data = [
                        {
                            name: this.form.name,
                            age: this.form.age
                        },
                        ...this.form.items.map((item) => ({ sex: item.sex, hobby: item.hobby }))
                    ];

                    console.log(this.form, '数据结构');
                } else {
                    console.log('表单验证失败');
                }
            });
        },
    }
};
</script>

The data structure obtained after submission is as shown in the figure below, which is passed in according to the structure required by the backend

 If the data object structure required by the backend, just write it as follows

  // 提交做校验
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    const data = [
                        {
                            name: this.form.name,
                            age: this.form.age
                        },
                        ...this.form.items.map((item) => ({ name: item.name, age: item.age }))
                    ];

                    console.log(data, '数据结构');
                } else {
                    console.log('表单验证失败');
                }
            });
        }

If you want to implement a complex form, such as adding all the same, and adding the same part, you can read my other article

This is the end of the article, I hope it will be helpful to you~