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>
相关推荐
HelloRevit33 分钟前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
阿珊和她的猫44 分钟前
Webpack Dev Server的安装与配置:解决跨域问题
vue.js·webpack
ohMyGod_1231 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day1 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
醋醋1 小时前
Vue2源码记录
前端·vue.js
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
敲代码的玉米C2 小时前
Vue Draggable 深入教程:从配置到实现的完整指南
vue.js
frontDeveloper2 小时前
Vue3基础使用概览
vue.js
江耳2 小时前
从10秒到无限流:我用Vercel+NextJS实现AI流式对话遇到的超时问题及解决方案
前端
总之就是非常可爱2 小时前
三分钟让你看懂alien-signals computed基本原理
前端