需求说明
后台可以添加多个角色进行不同的分佣规则。现在要对每一个表格都进行填写的校验。
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官方文档。