elementui的el-form动态添加相同的表单时的校验_elementui多个表单校验同名字段校验-CSDN博客

本文链接：https://blog.csdn.net/jiudenggushijingguo/article/details/117302472

这篇博客探讨了如何在后台管理系统中实现多角色的分佣规则设置。通过使用ElementUI组件库，作者展示了如何创建一个动态表格，每个表格行代表一个角色，包含角色名称选择、各级别首单和非首单佣金、返佣单数等字段，并实现了字段的必填校验。在添加和删除角色功能中，利用Vue.js的数据绑定和方法来维护表格数据。验证过程通过调用`this.$refs['roleForm'].validate()`进行，返回Promise以处理异步验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求说明

后台可以添加多个角色进行不同的分佣规则。现在要对每一个表格都进行填写的校验。
在这里插入图片描述

eg:
在这里插入图片描述

直接上代码

template部分

// template部分
<el-button type="primary" @click="addRole">添加角色</el-button>
<el-form
    ref="roleForm"
    :model="roleForm"
    label-width="150px"
    v-if="roleForm.officerRoleParams.length > 0"
>
    <el-row  v-for="(item, index) in roleForm.officerRoleParams" :key="index">
        <el-form-item
            label="角色名称"
            :prop="'officerRoleParams.' + index + '.roleId'"
            :rules="{
                required: true,
                message: '角色名称不能为空',
                trigger: 'blur',
            }"
        >
            <el-select
                v-model="item.roleId"
                filterable
                placeholder="请选择"
            >
                <el-option
                    v-for="item in roleList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
            </el-select>
            <el-button
                type="primary"
                @click="delRole(index)"
                style="margin-left: 20px"
                >删除角色</el-button
            >
        </el-form-item>
        <el-form-item
            label="一级首单"
            :prop="'officerRoleParams.' + index + '.firstCommission'"
            :rules="{
                required: true,
                message: '一级首单不能为空',
                trigger: 'blur',
            }"
        >
            <el-input
                type="text"
                v-model="item.firstCommission"
                maxlength="4"
                oninput="value=value.replace(/\D|^0/g,'')"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="一级非首单"
            :prop="'officerRoleParams.' + index + '.otherCommission'"
            :rules="{
                required: true,
                message: '一级非首单不能为空',
                trigger: 'blur',
            }"
        >
            <el-input
                type="text"
                v-model="item.otherCommission"
                maxlength="4"
                oninput="value=value.replace(/\D|^0/g,'')"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="二级首单"
            :prop="'officerRoleParams.' + index + '.friFirstCommission'"
            :rules="{
                required: true,
                message: '二级首单不能为空',
                trigger: 'blur',
            }"
        >
            <el-input
                type="text"
                v-model="item.friFirstCommission"
                maxlength="4"
                oninput="value=value.replace(/\D|^0/g,'')"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="二级非首单"
            :prop="'officerRoleParams.' + index + '.friOtherCommission'"
            :rules="{
                required: true,
                message: '二级非首单不能为空',
                trigger: 'blur',
            }"
        >
            <el-input
                type="text"
                v-model="item.friOtherCommission"
                maxlength="4"
                oninput="value=value.replace(/\D|^0/g,'')"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="一级返佣单数"
            :prop="'officerRoleParams.' + index + '.level1Limit'"
            :rules="{
                required: true,
                message: '一级返佣单数不能为空',
                trigger: 'blur',
            }"
        >
            <el-input
                type="text"
                v-model="item.level1Limit"
                maxlength="4"
                oninput="value=value.replace(/\D|^0/g,'')"
            ></el-input>
        </el-form-item>
        <el-form-item
            label="二级返佣单数"
            :prop="'officerRoleParams.' + index + '.level2Limit'"
            :rules="{
                required: true,
                message: '二级返佣单数不能为空',
                trigger: 'blur',
            }"
        >
            <el-input
                type="text"
                v-model="item.level2Limit"
                maxlength="4"
                oninput="value=value.replace(/\D|^0/g,'')"
            ></el-input>
        </el-form-item>
    </el-row>
</el-form>

script部分

// data
roleForm: {
    officerRoleParams: [],
},
roleList: ['默认','车行'], // 添加角色名称
// methods
// 删除角色
delRole(index) {
    this.roleForm.officerRoleParams.splice(index,1);
    console.log(index);
},
// 添加角色
addRole() {
    let roleItem = {
        firstCommission: "",
        friFirstCommission: "",
        friOtherCommission: "",
        level1Limit: "",
        level2Limit: "",
        otherCommission: "",
        roleId: "",
    };
    this.roleForm.officerRoleParams.push(roleItem);
},