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>
相关推荐
风无雨15 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl19 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js