element input 比较大小值相互校验导致死循环

问题背景

使用elementui input 校验大小值时，min > max 导致min出现红框，修改最大值，使得最小值小于最大值后，前面的最小值输入框，由于没有选中输入，依然展示红色提示，预期最大值修改后联动。

在 rules 的 validateOutputMinAndMax 中写这部分逻辑，导致一直重复校验而出现死循环，比如

const tableRules = ref({
  min: [
    { validator: validateOutputMinAndMax, trigger: ['change'] }
  ],
  max: [
    { validator: validateOutputMinAndMax, trigger: ['change'] }
  ]
})


const validateOutputMinAndMax = (rule: any, value: any, callback: any) => {
  let index = rule.field.split('.')[0];
  let field = rule.field.split('.')[1];
  let rowMinValue = tableData.value[index].min;
  let rowMaxValue = tableData.value[index].max;


  const isEmpty = (value) => {
    return value === null || value === '';
  }

  // 不能同时为空
  if (isEmpty(rowMinValue) && isEmpty(rowMaxValue)) {
    callback({
      type: 'error',
      msg: t('minAndMaxCannotBeEmpty')
    });
    return;
  }

  if (!isEmpty(value) && !isNumeric(value + '')) {
    callback({
      type: 'error',
      msg: t('pleaseInputNumber')
    });
    return;
  }

  // 最小值不能大于最大值
  if (rowMinValue !== null && rowMinValue !== '' && rowMaxValue !== '' && rowMaxValue !== null && Number(rowMinValue) >= Number(rowMaxValue)) {
    callback({
      type: 'error',
      msg: t('minValueShouldBeLessThanMax')
    });
    return;
  }

  callback();

  if (field === 'min') {
      tableRuleFormRef.value.validateField(`${index}.max`, () => {});
    }

if (field === 'max') {
      tableRuleFormRef.value.validateField(`${index}.min`, () => {});
    }
}

  解决办法

input 元素上使用 @input="validateMinOrMax(scope.$index, 'max')" ，

const validateMinOrMax = (index, field) => {
  tableRuleFormRef.value.validateField(`${index}.${field}`);
}