项目场景:
项目场景:一些大型的项目中,不仅仅是简单的 form表单校验,可能会有一些复杂的表单校验,如下图所示,带新增删除功能,同时删除新增的表单也需要做校验:
关键点:
- 新增删除是对数组进行的操作,当然要遍历循环数组喽
- props正常是要对应某个form中的元素,此时要对应list中的元素,该如何对应??通过
:prop="`machineList.${index}.***`"
- rules中的校验该如何校验呢:只能在元素中写上对应的校验,否则无法实现校验
代码实现:
data中数据如下:
dispatchForm: {
machineList: []
}
form表单格式如下:
<el-form
:model="dispatchForm"
label-width="120px"
ref="dispatchForm"
>
<div
class="equip-class"
v-for="(item, index) in dispatchForm.machineList"
:key="index"
>
<el-row>
<el-col :span="9">
<el-form-item
label=""
:prop="`machineList.${index}.outFlag`"
:rules="{
required: true,
message: '请选择外机',
trigger: ['blur', 'change']
}"
>
<el-select
:disabled="disabledFlag"
v-model="item.outFlag"
placeholder="请选择外机"
style="width: 100%"
>
<el-option
v-for="item in curOutEqList"
:key="item.idFlag"
:label="item.goodsName"
:value="item.idFlag"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2">
<div class="align-center">--</div>
</el-col>
<el-col :span="10">
<el-form-item
label=""
:prop="`machineList.${index}.inEquipCode`"
:rules="{
required: true,
message: '请选择外机',
trigger: ['blur', 'change']
}"
>
<el-select
:disabled="disabledFlag"
v-model="item.inEquipCode"
placeholder="请选择内机"
style="width: 100%"
multiple
collapse-tags
>
<el-option
:disabled="disabledFlag"
v-for="(item, index) in curInEqList"
:key="item.idFlag"
:label="item.goodsName"
:value="item.idFlag"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="1">
<i
class="el-icon-remove-outline removeIcon"
@click="removeEquipment(index)"
></i>
</el-col>
</el-row>
</div>
<div class="addIcon" @click="addEquipment">
<i class="el-icon-plus"></i>添加
</div>
</el-form>
methods部分如下:
removeEquipment(index) {
this.dispatchForm.machineList.splice(index, 1);
},
addEquipment() {
this.dispatchForm.machineList.push({
outFlag: '',
inEquipCode: []
});
},
好了,这样就可以把复杂表单的校验给实现了