el-form嵌套el-table以表格的形式批量添加多个用户

需求：需要批量添加用户，使用弹窗的方式太麻烦了，所以做成表格的形式，并且表单可以添加删除，并且有表单校验。效果如下

1.效果

2.关键代码讲解

是el-form嵌套的el-table，el-form只能为对象，el-table只能为数组，所以需要对象嵌套数组的形式

自定义规则使用插槽的方式添加，要保证每个都不一样所以这个prop也得是动态的

html 复制代码

   <el-table-column prop="name" label="姓名" width="200px">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'tableData.' + scope.$index + '.name'"
                            :rules="{
                                required: true,
                                message: '姓名不能为空',
                                trigger: 'blur'
                            }"
                        >
                            <el-input size="small" v-model="scope.row.name" placeholder="请输入姓名" clearable></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>

删除只需要删除所点击的行数据就行

html 复制代码

     <el-button type="text" size="small" @click="tableForm.tableData.splice($index, 1)">删除</el-button>

3.完整代码

javascript 复制代码

<template>
    <div>
        <el-button style="margin: 40px 0px" type="primary" size="default" @click="submitForm('formRef')">保存</el-button>

        <el-form :model="tableForm" ref="formRef" class="demo-ruleForm">
            <el-table :data="tableForm.tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column prop="department" label="所属部门" width="200px">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'tableData.' + scope.$index + '.department'"
                            :rules="{
                                required: true,
                                message: '证件类型不能为空',
                                trigger: 'change'
                            }"
                        >
                            <el-select size="small" clearable v-model="scope.row.department" filterable placeholder="请选择所属部门">
                                <el-option v-for="item in documentTypeList" :key="item.id" :label="item.value" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="200px">
                    <template slot-scope="scope">
                        <el-form-item
                            :prop="'tableData.' + scope.$index + '.name'"
                            :rules="{
                                required: true,
                                message: '姓名不能为空',
                                trigger: 'blur'
                            }"
                        >
                            <el-input size="small" v-model="scope.row.name" placeholder="请输入姓名" clearable></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template #default="{ row, $index }">
                        <el-button @click="addFormRow(row)" type="text" size="small">添加</el-button>
                        <el-button type="text" size="small" @click="tableForm.tableData.splice($index, 1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table></el-form
        >
    </div>
</template>

<script>
export default {
    data() {
        return {
            documentTypeList: [
                {
                    id: 1,
                    value: '研发'
                },
                {
                    id: 2,
                    value: '产品'
                }
            ],
            tableForm: {
                tableData: [
                    {
                        department: '',

                        name: ''
                    },
                    {
                        department: '',
                        name: ''
                    }
                ]
            }
        };
    },
    mounted() {},
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('submit!', this.tableForm);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addFormRow() {
            this.tableForm.tableData.push({
                department: '',
                name: ''
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.demo-ruleForm {
    .el-form-item {
        margin-bottom: 0px;
    }
}
</style>