el-form表单点击添加一样的表单内容并且校验

需求:el-form表单有初始的样式，之后点击添加按钮后，出现相同的样式，但是内容是不影响的，并且新添加的样式也会有表单校验

默认表单如下图

 

 点击添加姓名年龄，并且不输入点击提交后如下图

 

 

 代码我直接全部贴了，需要直接复制粘贴就行，代码量不大，挺好实现的

<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>

提交后得到的数据结构如下图，根据后端所需结构传入

 如果后端需要的数据对象结构，如下这样写就行了

  // 提交做校验
        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('表单验证失败');
                }
            });
        }

如果要实现复杂表单，比如添加全部一样的，和添加部分一样的一起，可以看我另外一篇文章

文章到此结束，希望对你有所帮助~