elementui的el-form动态添加相同的表单时的校验

需求说明

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

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);
},

说明

校验部分直接调用 this.$refs[“roleForm”].validate(); 这种方式返回的是一个promise，详情见elementui官方文档。