vue+要素の多層フォーム検証プロップとルール

核心点: 外側のループは item と Index で、内側のループは item2 と Index2 です。

すべてが同じ属性名で定義されている場合
外側のループも記述する必要があります:prop="'block.'+index+'.numerical'"
同様に内側のループも記述する必要があります:prop="'objectSpecs.'+ index2 + '.numerical'"

チェック機能の方法: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' }
    ];
  }
}

おすすめ

転載: blog.csdn.net/m0_45685758/article/details/132232377