Element校验循环体必填

194 阅读1分钟

需求:input输入框必须填写之后才能能加下一个=》如图:

1666855422292.jpg 代码如下:

 <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值一定要和定义时的值一致。