vue的el-form-item循环检验rules

<!-- 车长泛化配置組件 -->
<template>
  <div>
    <el-form :model="tempData" inline v-for="(item, index) in tempData.truckToCargoRule" :key="index"
      ref="truckToCargoRule" label-suffix="：">
  
 

      <el-form-item label="泛化车长组" :prop="`truckToCargoRule.${index}.min`"
        :rules="{ validator: validateMin, trigger: 'change' }">
        <el-input v-model="item.to.min" @input="minInput(index)" placeholder="请输入内容" style="width: 120px;"></el-input>
      </el-form-item>
      <el-form-item>
        到
      </el-form-item>
   
      <el-form-item :prop="`truckToCargoRule.${index}.max`" :rules="{ validator: validateMax, trigger: 'change' }">
        <el-input v-model="item.to.max" @input="maxInput(index)" placeholder="请输入内容" style="width: 120px;"></el-input>
      </el-form-item>

    </el-form>
    <el-button @click="submitForm('truckToCargoRule')" type="primary" style="margin-bottom: 10px;">校验</el-button>
  </div>
</template>

<script>
import { isEmpty } from '../helper'

export default {
  name: 'TruckLengthComp',
  props: {
    truckToCargoRule: {
      type: Array,
    }
  },
  data() {
    return {
      tempData: { truckToCargoRule: this.truckToCargoRule },

    }
  },
  methods: {
    validateMin(rule, value, callback) {
      let index = rule.field?.split('.')?.[1];
      let min = this.tempData.truckToCargoRule[index].to.min;
      let max = this.tempData.truckToCargoRule[index].to.max;
      if (isEmpty(min)) {
        callback(new Error('必填'));
      } else if (max < min) {
        callback(new Error('必须小于等于结束车长'));
      }
    },
    validateMax(rule, value, callback) {
      let index = rule.field?.split('.')?.[1];
      let min = this.tempData.truckToCargoRule[index].to.min;
      let max = this.tempData.truckToCargoRule[index].to.max;
      if (isEmpty(max)) {
        callback(new Error('必填'));
      } else if (max < min) {
        callback(new Error('必须大于等于开始车长'));
      }
    },
    submitForm() {
      let isValidate = true;
      for (let i = 0; i < this.$refs['truckToCargoRule'].length; i++) {
        this.$refs['truckToCargoRule'][i].validate((valid) => {
          if (!valid) {
            isValidate = false;
          }
        });
      }
      if (isValidate) {
        // 继续往下走
      }
    },
    maxInput(index) {
      let value = this.truckToCargoRule[index].to.max;
      const regex = /^\d*\.?\d{0,1}$/;
      if (value.length == 2 && value.startsWith('0') && value.charAt(1) != '.') {
        this.truckToCargoRule[index].to.max = value[1];
      } else if (regex.test(value)) {
        // 使用正则表达式限制输入为数字且最多一位小数
        this.truckToCargoRule[index].to.max = value;
      } else {
        // 如果不符合规则，则回退到上一次符合规则的值
        this.truckToCargoRule[index].to.max = value.slice(0, -1);
      }
    },
    minInput(index) {
      let value = this.truckToCargoRule[index].to.min;
      const regex = /^\d*\.?\d{0,1}$/;
      if (value.length == 2 && value.startsWith('0') && value.charAt(1) != '.') {
        this.truckToCargoRule[index].to.min = value[1];
      } else if (regex.test(value)) {
        // 使用正则表达式限制输入为数字且最多一位小数
        this.truckToCargoRule[index].to.min = value;
      } else {
        // 如果不符合规则，则回退到上一次符合规则的值
        this.truckToCargoRule[index].to.min = value.slice(0, -1);
      }
    }
  },
}
</script>

引用如下:

      <TruckLengthComp :truckToCargoRule="truckToCargoRule"></TruckLengthComp>
 truckToCargoRule: [
        {
          "from": {
            "min": 0,
            "includeMin": true,
            "max": 1.8,
            "includeMax": true
          },
          "to": {
            "min": 0,
            "includeMin": true,
            "max": 2.7,
            "includeMax": true
          }
        },
        {
          "from": {
            "min": 1.8,
            "includeMin": true,
            "max": 2.7,
            "includeMax": true
          },
          "to": {
            "min": 1.8,
            "includeMin": true,
            "max": 5.4,
            "includeMax": true
          }
        },
        {
          "from": {
            "min": 3,
            "includeMin": true,
            "max": 4,
            "includeMax": true
          },
          "to": {
            "min": 5,
            "includeMin": true,
            "max": 6,
            "includeMax": true
          }
        }
      ]