需求:input输入框必须填写之后才能能加下一个=》如图:
代码如下:
<div>
<template v-for="(item,index) in form.gatewayList" :key="index">
<el-form-item :prop="'gatewayList.' + index + '.webNum'" :rules="rules.webNum" placeholder="请输入网关设备号"
:label="'网关'+(index+1)">
<div style="display: flex;align-items: center;">
<el-input style="width:85%;" v-model="item.webNum" :disabled="isDisablede" maxlength="30"></el-input>
<span v-show="editId == 1 || editId == 3" class="el-icon-delete delGateway" @click="delWebNum(index)"></span>
</div>
</el-form-item>
</template>
</div>
<div class="text-center">
// 增加按钮
<span class="el-icon-circle-plus-outline addGateway" @click="addWebNum"></span>
</div>
addWebNum() {
let newgate = {
webNum:''
}
if(this.form.gatewayList.length>9){
this.$message({type:'warning',message:'最多增加10个网关'})
}else{
let flags = this.form.gatewayList.every(item => !!item.webNum)
if(flags == true) {
this.form.gatewayList.push(newgate)
} else {
let getCurIndx
for (const key in this.form.gatewayList) {
getCurIndx = key
}
this.$refs.form.validateField('gatewayList.' + getCurIndx + '.webNum')
}
}
注意: 点击添加时校验的prop值一定要和定义时的值一致。