element plus中form组件一个form-item对应多个框的解决方案

实现如图问题，在一个form组件一个form-item对应多个框。以下是代码部分：

    
      
    
    
      
        
      
    
    -
    
      
        
      
    

对应的校验规则

const rules = {
  startTimeVal: [
    { required: true, message: "请选择开始时间", trigger: "blur" },
    { validator: checkStartTime, trigger: "change" },
  ],
  endTimeVal: [
    { required: true, message: "请选择结束时间", trigger: "blur" },
    {
      validator: checkEndTime,
      trigger: "change",
    },
  ],
};

 const checkEndTime = (rule: any, value: any, callback: any) => {
  if (value && JobmMeetingData.value.startTimeVal) {
    const start = new Date(`1970-01-01 ${JobmMeetingData.value.startTimeVal}`);
    const end = new Date(`1970-01-01 ${value}`);
    if (start > end) {
      callback(new Error("结束时间不能小于开始时间"));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

const checkStartTime = (rule: any, value: any, callback: any) => {
  if (value && JobmMeetingData.value.endTimeVal) {
    const start = new Date(`1970-01-01 ${value}`);
    const end = new Date(`1970-01-01 ${JobmMeetingData.value.endTimeVal}`);
    if (start > end) {
      callback(new Error("开始时间不能大于结束时间"));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

我们需要在代码中定义校验规则和校验方法。在本例中，我们分别定义了两个校验方法checkStartTime和checkEndTime，用于验证开始时间和结束时间的正确性。这两个方法会在表单控件的值发生变化时进行调用。如果校验不通过，我们将通过callback方法返回一个错误信息。