elementUi表单验证之数组类型自定义验证:限制时间范围以及传递当前行的index的方法

界面：

　　要求：结束时间不能小于开始时间。

　　第二行的开始时间需大于第一行的结束时间，以此类推。

 

注意校验数组里的每一项的写法:        :prop=" 'schedulTimeList['+index+'].startTime' "

在rules里面进行了传参，主要是为了拿到当前行的index

通过时间选择器的picker-options, 限制： minTime: index-1>=0 && form.schedulTimeList[index-1].startTime，达到第二行的开始时间大于第一行的结束时间的目的

        <el-form-item
          label="开始时间:"
          :prop="'schedulTimeList['+index+'].startTime'"
          :rules="{required: true, validator: validateTime, message: '请选择开始时间！', trigger: 'blur', index: index, timeType: 'start'}"
        >
          <el-time-select
            v-model="item.startTime"
            placeholder="开始时间"
            :disabled="readonly"
            :picker-options="{
              start: '08:00',
              step: '00:15',
              end: '22:00',
             minTime: index-1>=0 && form.schedulTimeList[index-1].startTime
            }"
          />
        </el-form-item>
        <el-form-item
          label="结束时间:"
          :prop="'schedulTimeList['+index+'].endTime'"
          :rules="{required: true, validator: validateTime, message: '请选择结束时间！', trigger: 'blur', index: index, timeType: 'end'}"
        >
          <el-time-select
            v-model="item.endTime"
            placeholder="结束时间"
            :disabled="readonly"
            :picker-options="{
              start: '08:00',
              step: '00:15',
              end: '22:00',
              minTime: item.startTime
            }"
          />
        </el-form-item>

　js:

      validateTime: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择时间！'))
          return false
        } else {
          const index = rule.index
          const start = this.form.schedulTimeList[index].startTime
          const end = this.form.schedulTimeList[index].endTime
          if (start && end) {
            // console.log('start，end', start, end)
            if (start.replace(':', '') < end.replace(':', '')) {
              callback()
            } else {
              rule.message = rule.timeType === 'start' ? '开始时间必须早于结束时间！' : '结束时间必须晚于开始时间！'
              callback(new Error())
            }
          }
          // 比较时间的方法二
          // if (start && end) {
          //   const startMin = parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])
          //   const endMin = parseInt(end.split(':')[0]) * 60 + parseInt(end.split(':')[1])
          //   console.log(startMin, endMin, '开始和结束')
          // }
        }
      }