循环表单，点击按钮新增及添加自定义校验

<template>
  <div class="wrapper">
    <div
      v-for="(item, index) in dataList"
      :key="index+999"
      class="con"
    >
            <h3>数据节点{{ index + 1 }}</h3>
            <el-form :model="item" label-width="130px" label-position="right">
              <el-form-item label="节点类型：">
                <el-radio-group v-model="item.type">
                  <el-radio :label="0">仓储</el-radio>
                  <el-radio :label="1">运输</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form
                v-if="item.type===0"
                ref="dataForm1"
                key="A"
                :model="item"
                :rules="rulesTypeObj[`timeRules${index}`]"
                label-width="130px"
                label-position="right"
              >
                <el-form-item label="入库时间：" prop="startTime" class="is-required">
                  <el-date-picker
                    v-model="item.startTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm"
                    @change="changTime($event,index)"
                  />
                </el-form-item>
                <el-form-item label="出库时间：" prop="endTime" class="is-required">
                  <el-date-picker
                    v-model="item.endTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm"
                    @change="changTime($event,index)"
                  />
                </el-form-item>
              </el-form>

              <el-form
                v-else
                ref="dataForm2"
                key="B"
                :model="item"
                :rules="rulesTypeObj[`timeRules${index}`]"
                label-width="130px"
                label-position="right"
              >
                <el-form-item label="启运时间：" prop="startTime" class="is-required">
                  <el-date-picker
                    v-model="item.startTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm"
                    @change="changTime($event,index)"
                  />
                </el-form-item>
                <el-form-item label="抵达时间：" prop="endTime" class="is-required">
                  <el-date-picker
                    v-model="item.endTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm"
                    @change="changTime($event,index)"
                  />
                </el-form-item>
                <el-form-item label="运输工具：" prop="positions" class="is-required">
                  <el-button type="text" @click="handelSelect(item,index)">选择</el-button>
                </el-form-item>
              </el-form>
            </el-form>
            <el-button
              class="con-addBtn"
              type="text"
              icon="el-icon-circle-plus"
              @click="addFormData(index)"
            />
            <el-button
              v-if="index !== 0"
              class="con-delBtn"
              type="text"
              icon="el-icon-remove"
              @click="delFormData(index)"
            />
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      dataObj: {
        type: 0, // 0仓储 1运输
        startTime: '',
        endTime: '',
        positions: []
      },
      dataList: [
        {
          type: 0, // 0仓储 1运输
          startTime: '',
          endTime: '',
          positions: []
        }
      ],
      rulesTypeObj: {},
    }
  },
  computed: {
    dataListNew() {
      return JSON.parse(JSON.stringify(this.dataList))
    }
  },
  watch: {
    dataListNew: {
      handler(val, old) {
        if (val) {
          this.getRulesType()
        }
      },
      deep: true,
      imediate: true
    }
  },
  methods: {
    getRulesType() {
      this.dataList.forEach((item, index) => {
        this.rulesTypeObj[`timeRules${index}`] = {
          startTime: [
            {
              required: true,
              validator(rule, value, callback) {
                const start = Date.parse(new Date(value)) / 1000
                const end = Date.parse(new Date(item.endTime)) / 1000
                if (!value) {
                  callback(new Error('请选择入库时间'))
                } else if (start && end && start > end) {
                  callback(new Error('请选择正确的时间范围'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          endTime: [
            {
              required: true,
              validator(rule, value, callback) {
                const end = Date.parse(new Date(value)) / 1000
                const start = Date.parse(new Date(item.startTime)) / 1000
                if (!value) {
                  callback(new Error('请选择出库时间'))
                } else if (start && end && start > end) {
                  callback(new Error('请选择正确的时间范围'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          positions: [
            {
              required: true,
              validator(rule, value, callback) {
                if (value.length === 0) {
                  callback(new Error('请选择运输工具'))
                } else {
                  callback()
                }
              },
              trigger: 'change'
            }
          ]
        }
      })
    },
    // 添加数据节点表单
    addFormData(index) {
      const arr = cloneObj(this.dataObj) //cloneObj：深拷贝方法，外部引入和不相关代码删了
      this.dataList.push(arr)
      // this.dataList[index + 1].startTime = this.subTime(
      //   this.dataList[index].endTime
     //  )
    },
    delFormData(index) {
      this.dataList.splice(index, 1)
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .sty {
  margin-top: 7vh !important;
}
.whereForm {
  .dataId {
    padding: 0px 10px;
    background-color: #e4e4e4;
  }
  /deep/.el-input {
    width: 360px;
  }
  border-bottom: 3px dashed #999;
}
/deep/.el-dialog__body {
  height: 500px;
  overflow-y: scroll;
}
.content {
  .con {
    position: relative;
    /deep/.el-input {
      width: 300px;
    }
    border-bottom: 3px dashed #999;
    .con-addBtn {
      position: absolute;
      right: 66px;
      bottom: 0px;
      font-size: 23px;
    }
    .con-delBtn {
      position: absolute;
      right: 0px;
      bottom: 0px;
      font-size: 23px;
      color: #f56c6c;
    }
  }
  .con:last-child {
    border: none;
  }
}
.thWItem {
  width: 175px;
}
</style>