vue+element multi-layer form verification prop and rules

Core point: The outer loop is item and index, and the inner loop is item2 and index2

If they are all defined with the same attribute name
the outer loop must be written:prop="'block.'+index+'.numerical'"
similarly the inner loop must be written:prop="'objectSpecs.'+ index2 + '.numerical'"

Check function method:rules="getRules(item2, item2.name)"

<div class="block" v-for="(item, index) in block" :key="index">
  <el-form ref="blockForm" :model="item" :rules="formBlockRule" :inline="true">
    <el-form-item>多个formItem...省略一下</el-form-item>
    <div v-for="(item2,index2) in item.objectSpecs" :key="index2">
      <!--输入框-->
      <el-form-item v-if="item2.input" 
                    :prop="'objectSpecs.' + index2 + '.numerical'" 
                    :label="item2.name" label-width="130px" 
                    :rules="getRules(item2, item2.name)">
        <el-input :placeholder="item2.placeholder" 
                  v-model="item2.numerical" 
                  :onkeyup="numberFormate(item2, 'numerical')" 
                  :disabled="readOnly">
        </el-input>
      </el-form-item>
      <el-form-item v-if="item2.input">
        <span>{
   
   {item2.units}}</span>
      </el-form-item>
      <!--选择框-->
      <el-form-item v-if="!item2.input" 
                    :prop="'objectSpecs.' + index2 + '.numerical'" 
                    :label="item2.name" label-width="130px" 
                    :rules="getRules(item2, item2.name)">
        <el-select v-model="item2.numerical" 
                   placeholder="请选择" 
                   :disabled="readOnly">
          <el-option v-for="(key,value) in item2.numericalList" 
                     :key="value" 
                     :label="key" 
                     :value="value">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
  </el-form>
</div>
getRules(item, name) {
    
    
  if(item.input){
    
    
    return [
      {
    
     required: true, message: '请输入' + name, trigger: 'blur' },
    ]
  }else{
    
    
    return [
      {
    
     required: true, message: '请选择' + name, trigger: 'change' }
    ];
  }
}

Guess you like

Origin blog.csdn.net/m0_45685758/article/details/132232377
Recommended