vue遍历表单加规则校验

       <div v-for="(item,i) in form.guOrderProductList"  class="Visiblecard  mb-10">
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- prop="productModel"   prop="requireQuantity"   -->
              <el-form-item label="产品型号"  :prop="`guOrderProductList.${i}.productModel`"  :rules="[{ required: true, message: '产品型号不能为空', trigger: 'blur'}]">
                <el-input maxlength="50" v-model="item.productModel" style='width:220px'  placeholder="请输入产品型号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="需求量" :prop="`guOrderProductList.${i}.requireQuantity`" :rules="[{ required: true, message: '需求量不能为空', trigger: 'blur'}]">
                <el-input maxlength="50"  oninput="value=value.replace(/[^\d\.]/g,'') " v-model="item.requireQuantity" style='width:220px' placeholder="请输入需求量" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button @click="addchild(i)" type="text"><i class="el-icon-plus mr-10"></i>添加指标</el-button>
              <el-button class="fr" @click="removeparent(i)" type="text"><i class="el-icon-delete mr-10"></i>删除型号</el-button>
            </el-col>
          </el-row>
</div>

主要代码

:prop=“guOrderProductList.${i}.productModel” :rules=“[{ required: true, message: ‘产品型号不能为空’, trigger: ‘blur’}]”>

你可能感兴趣的:(vue.js,javascript,前端)