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>
相关推荐
恋猫de小郭16 分钟前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5551 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
武昌库里写JAVA2 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间6 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军7 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪7 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer7 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu7 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui