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>
相关推荐
山河木马4 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina6 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者12 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享21 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享21 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海25 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子36 分钟前
深入理解TCP协议
前端·javascript·面试
万少37 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好1 小时前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl