el-form表单中不同数据类型对应的时间格式化和校验规则

 1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化,

2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单.

3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的时间, 所以需要转换时间戳.

 <el-form
        ref="formRef1"
        :model="form1"
        :rules="rules1"
        label-width="110px"
        :inline="true"
        class="demo-form-inline"
      >
 
        <el-form-item label="数据类型" prop="type">
          <el-select v-model="form1.type" placeholder="请选择">
            <el-option
              v-for="item in dataList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            el-option>
          el-select>
        el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            ref="startTimePickerRef"
            v-model="form1.startTime"
            :type="dateType"
            :format="timeFormat"
            :value-format="timeFormat"
            placeholder="开始时间"
          >
          el-date-picker>
        el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            ref="endTimePickerRef"
            v-model="form1.endTime"
            :type="dateType"
            :format="timeFormat"
            :value-format="timeFormat"
            placeholder="结束时间"
          >
          el-date-picker>
        el-form-item>
      el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('formRef1')">取 消el-button>
        <el-button type="primary" @click="submitData('formRef1', 1)">生成数据el-button>
      span>
    el-dialog>