vue3 + element-plus type=“daterange“ 的日期选择器 for循环动态设置日期范围 (日期范围为上一个日期的结束日期)

<el-col :span="24">

            <el-form-item label="差旅行程" required>

              <el-icon  @click="addTrip" size="20" style="cursor: pointer;"><CirclePlusFilled /></el-icon>

            </el-form-item>

          </el-col>

         <el-col :span="24" v-for="(item,index) in formModel1.tripList" :key="index" >

          <div style="display: flex;justify-content: space-between;">

            <el-col :span="12" >

              <el-form-item :label="'第'+ (index + 1) +'段差旅行程'" :prop="'tripList.' + index + '.time'" :rules="{ required: true, message: '请选择该段差旅形成时间', trigger: ['change', 'blur'] }">

                <el-date-picker

                  :disabled="thetitle == '查看差旅计划' || thetitle == '审批差旅计划'"

                  v-model="item.time"

                  type="daterange"

                  range-separator="至"

                  value-format="YYYY-MM-DD"

                  start-placeholder="开始时间"

                  end-placeholder="结束时间"

                  :disabled-date="item.disabledDate"

                />

              </el-form-item>

            </el-col>

            <el-col :span="12">

              <el-form-item label="差旅预算" :prop="'tripList.' + index + '.travelBudget'" :rules="{ required: true, message: '请输入该段差旅预算', trigger:'blur' }">

                <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">

                  <el-input

                    style="width: 90%;"

                    :disabled="thetitle == '查看差旅计划' || thetitle == '审批差旅计划'"

                    v-model="item.travelBudget"

                    placeholder="请输入差旅预算"

                  ></el-input>

                  <el-icon v-if="thetitle != '查看差旅计划' && thetitle != '审批差旅计划' " @click="delTrip(index)" size="20" color="red" style="cursor: pointer;margin-left: 20px;width: 10%;"><RemoveFilled /></el-icon>

                </div>

              </el-form-item>

            </el-col>

          </div>

         </el-col>

const formModel1 = ref({

  tripList:[

    {

      time: '',

      travelBudget: '',

      disabledDate: (time) => {

      }

    }

  ]

})

// 添加差旅行程

const addTrip = () => {

  formModel1.value.tripList.push({

    time: '',

    travelBudget: '',

    disabledDate: (time) => {

    }

  })

// 动态设置日期范围

  formModel1.value.tripList.forEach((res,index) => {

   if(index != 0) {

    res.disabledDate = (time) => {

      if(formModel1.value.tripList[index - 1].time[1]) {

        return time.getTime() < new Date(formModel1.value.tripList[index - 1].time[1]).getTime()

      }

    }

   }

  })

}

// 删除差旅行程 至少有一个

const delTrip = (index) => {

  if (formModel1.value.tripList.length > 1) {

    formModel1.value.tripList.splice(index, 1)

    formModel1.value.tripList.forEach((res,index) => {

      if(index != 0) {

        res.disabledDate = (time) => {

          if(formModel1.value.tripList[index - 1].time[1]) {

            return time.getTime() < new Date(formModel1.value.tripList[index - 1].time[1]).getTime()

          }

        }

      }

    })

  } else {

    ElMessage.warning('至少有一个')

  }

}