关于循环element-form验证如何使用/验证不起效果

效果图：

 1、需要注意:prop="`rateList.${index}.operatorName`" :rules="rules.operatorName"

rateList为form表单里面的数组，index为下标，operatorName为你的value值

<el-form :model="formData" :rules="rules" ref="formData" label-width="130px" :hide-required-asterisk="true">
          <div class="mb20">其他设置</div>
        <p class="mb10">交易服务费收费标准:</p>
        <el-row v-for="(item,index) in formData.rateList" :key="index" >
          <el-col :span="5">
            <el-form-item label="成交价: ">
            <el-col :span="12">
            <el-form-item :prop="`rateList.${index}.operatorName`" :rules="rules.operatorName">
              <el-select  v-model="item.operatorName" @input="forceUpdate" clearable>
                <el-option label="大于" value="大于"></el-option>
                <el-option label="小于" value="小于"></el-option>
                <el-option label="大于等于" value="大于等于"></el-option>
                <el-option label="小于等于" value="小于等于"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="" 
                :prop="`rateList.${index}.tradePrice`"
                :rules="rules.tradePrice">
              <el-input  v-model="item.tradePrice" @input="forceUpdate"></el-input>
              </el-form-item>
            </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="按成交价比例: " :prop="`rateList.${index}.tradeServiceChargePercentForm`"  :rules="rules.tradeServiceChargePercentForm">
              <el-input  v-model="item.tradeServiceChargePercentForm" @input="forceUpdate"><template slot="append">%</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="最低收取: " :prop="`rateList.${index}.tradeServiceChargeMin`"  :rules="rules.tradeServiceChargeMin">
              <el-input v-model="item.tradeServiceChargeMin" @input="forceUpdate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="最高收取: " :prop="`rateList.${index}.tradeServiceChargeMax`"  :rules="rules.tradeServiceChargeMax">
              <el-input  v-model="item.tradeServiceChargeMax" @input="forceUpdate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
          <el-form-item label="最小竞价单位: " prop="auctionPriceUnitMin" :rules="rules.auctionPriceUnitMin">
            <el-input class="itemWidth" type="number" v-model="formData.auctionPriceUnitMin"><template slot="append">元</template></el-input>
          </el-form-item>
          <el-form-item label="最低报价限额: " prop="auctionPriceLimitMin" :rules="rules.auctionPriceLimitMin">
            <el-input class="itemWidth" type="number" v-model="formData.auctionPriceLimitMin"><template slot="append">元</template></el-input>
          </el-form-item>
        </el-form>

export default {
  data() {
    return {
      formData: {
        rateList:[{},{}]
        auctionPriceUnitMin: '',
        auctionPriceLimitMin: '',
      },
      rules: {
        operatorName: [{ required: true, message: '请输入'}],
        tradePrice: [{ required: true, message: '请输入'}],
        tradeServiceChargePercentForm: [{ required: true, message: '请输入'}],
        tradeServiceChargeMax: [{ required: true, message: '请输入'},],
        tradeServiceChargeMin: [{ required: true, message: '请输入' },],
        auctionPriceUnitMin: [{ required: true, message: '请输入' },],
        auctionPriceLimitMin: [{ required: true, message: '请输入'},],
      },
      
    }
  },
  methods:{
    onSubmit(){
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          console.log('----success---')
        }
      });
    },
  }
}

特别注意：当输入的时候输入不进去的时候使用this.$forceUpdate()方法更新视图

或者：为什么明明输入了值，正则判断还是显示不能为空，没有校验内容（这个时候你要查看你是不是赋值了，比如this.formData.rateList=[{},{}]这样的没有定义name，手动试一下赋值空对象

如：rateList:[{operatorName:'',tradePrice:'',tradeServiceChargePercentForm:'',radeServiceChargeMax:'',tradeServiceChargeMin:'',auctionPriceUnitMin:'',auctionPriceLimitMin:''}],

）